浏览器常用的本地储存方式

日常开发中,难免会遇到一些要求浏览器储存一些数据的需求.目前常用的储存方法有:

cookie设计之初,本身不是用来储存数据.而是区别http请求.
所以每一次http请求,都会带上cookie.如果cookie储存的量实在过大,肯定会造成http的性能问题.


                                    
// 设置cookie(储存数据)
function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}

// 读取cookie(读取数据)
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

localStorage

相对cookie的读取操作,localStorage会简单非常多.
另外localStorage每一次更新,都会触发一次onstorage事件


                                    
localStorage.xxx="alili.tech";
localStorage['xxx']="alili.tech";
localStorage.setItem("xxx","alili.tech");
//获取
localStorage.xxx;
localStorage['xxx'];
localStorage.getItem("xxx");
//删除
localStorage.removeItem("xxx");
//清空locaStorage
localStorage.clear();

//onstorage事件
window.addEventListener("storage", function(){
// 做一些你想做的事情
}, false);

Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash.
缺点：需要安装Flash插件。

Google Gear

Google开发出的一种本地存储技术。
缺点：需要安装Gear组件。