首页 > 代码库 > Web存储技术--WebStorage

Web存储技术--WebStorage

Web开发中,必然会遇到需要临时或永久保存的数据。

传统用cookie保存在客户端,或通过sessionID关联session对象(如Servlet的HttpSession对象)保存在服务器端。

缺点是cookie实在太小,只有4k,已经无法应付现在的大数据时代了。而保存在服务器端很多时间根本没必要,本地保存一下即可,何必再和服务器交互一下呢?

因此HTML5出台了新的存储技术:WebStorage

WebStorage分为localStoragesessionStorage(原本还有一个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