首页 > 代码库 > Web存储技术--WebStorage
Web存储技术--WebStorage
Web开发中,必然会遇到需要临时或永久保存的数据。
传统用cookie保存在客户端,或通过sessionID关联session对象(如Servlet的HttpSession对象)保存在服务器端。
缺点是cookie实在太小,只有4k,已经无法应付现在的大数据时代了。而保存在服务器端很多时间根本没必要,本地保存一下即可,何必再和服务器交互一下呢?
因此HTML5出台了新的存储技术:WebStorage
WebStorage分为localStorage和sessionStorage(原本还有一个globalStorage,但在HTML5中已经被localStorage替代了)
localStorage:
即window.localStorage,通过setItem/getItem来保存获取数据。一旦保存后只能手动调用clear / removeItem来清理。
实例演示:页面上输入个人信息,提交表单后,希望将数据保存在本地,下次再打开同样画面时从本地取出数据自动填到表单中,可以省去每次手动填写的麻烦。
点击提交表单,将数据保存在本地的代码:
function doAply() { var info = { //将表单内容保存在对象中,以便JSON化该对象 name : "", male : "", address : "", phone : "" }; info.name = document.getElementById("inputName").value; //页面上获取Name var temp = document.getElementsByName("male"); //页面上获取Male for(var i=0; i<temp.length; i++) { if(temp[i].checked) { info.male = temp[i].value; } } info.address = document.getElementById("inputAddress").value; //页面上获取Address info.phone = document.getElementById("inputPhone").value; //页面上获取Phone localStorage.setItem("myPage_Info", JSON.stringify(info)); //JSON化该对象后,使用setItem方法保存至localStorage中 document.P.submit(); }
检查浏览器端的localStorage,确实已经保存成功
再次打开页面,从localStorage中读出这些数据,自动填充到页面表单里:
window.onload = init; function init() { for (key in localStorage) { if(key == "myPage_Info") { var info = JSON.parse(localStorage[key]); //解析JSON字符串成为一个对象 document.getElementById("inputName").value = http://www.mamicode.com/info.name; //此处开始将对象的属性填充到页面表单里>大功告成!且慢。。。上述代码为何要将数据打包成JSON格式呢?因为localStorage是浏览器的BOM对象,简单地说是全局的。如果将页面的数据一个个保存(而非打包)的话,很快localStorage里面将涌现出大量数据,不便管理。而且非常容易遇到重名问题。因此需要事先考虑如何打包以避免烦人的重名问题。
sessionStorage:
即window.sessionStorage,不再赘述,它的API结构和localStorage完全相同,只要将上述代码中localStorage改成sessionStorage即可,其他代码一行不用改。
那localStorage和sessionStorage有和区别呢?
区别在于清理的时机,见下表:
○:动作后数据仍在
×:动作后数据清空可见localStorage中一旦存入数据,该数据将永存(事实上将被浏览器保存到本地硬盘中),只有代码中调用localStorage.clear() / localStorage.removeItem(..)才能清理掉数据。
而sessionStorage中存入数据后,该数据的生命周期等于该页面的生命周期。如果关闭该页面或关闭浏览器,浏览器将自动将sessionStorage清空。如果打开新窗口,原先窗口页面关联的sessionStorage数据将在新页面中不可见。因此代码中调用sessionStorage.clear() / sessionStorage.removeItem(..)自然能清理掉数据,但通常不需要开发者操心清理数据的问题,靠浏览器就来清理吧。
WebStorage相比cookie有何优势呢?
cookie通常只有4K,而WebStorage默认有4M(具体多少以浏览器厂商的说明为准),是cookie的一千倍。如果你想知道你当前浏览器定义的WebStorage究竟有多大,可以写个测试脚本运行一下:
localStorage.clear(); localStorage.setItem("fuse", "-"); while(true) { var fuse = localStorage.getItem("fuse"); try { localStorage.setItem("fuse", fuse + fuse); } catch(e) { alert("Your browser blew up at " + fuse.length + " with exception: " + e); break; } } localStorage.removeItem("fuse");本人的Firefox试验下来localStorage有4194304=4096*1024,4M大小。
非要说WebStorage相比cookie有何劣势的话,可能就是性能问题了。第一次访问本地硬盘数据肯定会耗时一点。但本人不认为这是个问题,除非你的应用程序对性能要求异常严苛,否则实际证明这点所谓的”性能问题“根本不会造成任何影响,简单地说,普通人根本感受不到任何差异。想了解更多,可以参照:
http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/
Web存储技术--WebStorage