1. WebStorage是什么
知道吗？WebStorage这东西超级好用！在HTML5里能帮我们存储文件到电脑上，比那破烂的cookie好多了。WebStorage会在你的电脑里自动保留每个文件，用不着老是连接服务器，网络速度还变得更快！
2. WebStorage与Cookie的区别
说到WebStorage先来说说Cookie。就像是个跑腿小弟，悄悄去服务器拿了个ID回来，藏匿在你那小小的浏览器里。不过别忘了，这个小东西会拖慢网速，还有个挺大的问题就是，它存储不了太多内容，比如IE6只能保存大约2K大小的数据。
别以为 WebStorage就那么回事儿，比 cookie 厉害多了。这个东西可是存在咱们的电脑里头，上网就不用老是找服务器拉资料了，网费都能省不少
XML/HTML Code复制内容到剪贴板
function MyClick1()
{
}
var username = $("#TxtUserName").val();
3.示例：使用WebStorage实现用户名密码保存功能
var pwd = $("#TxtPwd").val();
看看这个烦得不行但看上去很简单的问题，比如说，你做了个注册页面，想让用户留下点个人信息和密码，然后点确认。可问题是，每次页面一刷新，刚才填的东西就全跑没了！
首先，咱们要让按钮听清楚你点了它没！然后，得先找出用户名和密码藏哪儿了，定位下就成！接下来就是在线保存的事儿，这儿给你提供两个妙招：要么试试Session Storage，要么试试Local Storage也行
用这个 SessionStorage 小功能？得用火狐浏览器2.0及以上版本才行。但它可只能在眼下的窗口或网页起作用。就是说，你在这个窗口或者页面滑一滑或者随便换个地方，以前存的那些东西还能用上。但要是你跑到别的窗口/页面去，那就没法用了！
sessionStorage.setItem( "k_username" , username); sessionStorage.setItem( "k_pwd" , pwd);
②试试看localStorage！这个方法只支持Chrome、Firefox 3.5、Safari 4以及IE8这些浏览器！而且即使关闭后重新开启网页也不用担心会丢失数据！不过要留意下旧版浏览器可能就搞不定了~
你存的资料就在那个第二个按钮里。还有，你瞧下面蓝字的那个部分，也教了两种简单便捷的方法处理本地存储：用removeItem就能删掉单个文件；别忘了，clear还能一次性把所有缓存都给清干净！
4.制作简易留言板示例
JavaScript Code复制内容到剪贴板
localStorage.setItem("k_username", username);
localStorage.setItem("k_pwd",pwd);
咱们也能自己搞一个简单的聊天板，只需要往留言板块里放点JavaScript代码，搞定添加和删掉留言的问题。然后加上一些HTML代码，就能打造出你心目中的漂亮 UI啦～
JavaScript Code复制内容到剪贴板
alert("保存成功！");
上网后，你就可以和大家扯家常哟。随便打字留言，点下“提交”，立刻就能有回复。别忘了还有个删除功能，想删哪个删哪个，或者全部清除也随你便！
你们瞅见上面的例了吗？HTML5里的WebStorage简直棒极了，网站跑得飞快，用着也特别爽。对程序猿来说，手里干活都方便不少！
JavaScript Code复制内容到剪贴板
function MyClick2() {
alert(sessionStorage.getItem("k_username"));
alert(sessionStorage.getItem("k_pwd"));
}
5.总结与展望
JavaScript Code复制内容到剪贴板
function MyClick2() {
alert(localStorage.getItem("k_username"));
alert(localStorage.getItem("k_pwd"))
}
老实说，说起HTML5，WebStorage那个玩意儿真的超级实用，对于咱们搞前端的人来说尤其有用！这个功能让整理数据变轻松了不少，网页加载得飞快，整个用户体验也是杠杠滴。以现在这发展趋势，只要科技一直进步，我相信WebStorage的应用范围肯定会越拓越广！
来聊聊 WebStorage 怎么玩儿呗，平时编程序时你都是咋用它的呀？这个话题真挺有意思。你们是不是也发现了别的特殊用处？赶紧分享下！
。
评论0