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

87 阅读1分钟
原文链接: alili.tech

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

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组件。