Web客户端存储

客户端存储有以下几种方式：
1.web存储(localStorage&&sessionStorage)
2.cookie
3.IE User Data
4.离线web应用
5.web数据库
6.文件系统API

下面我主要是总结一下localStorage,sessionStorage,cookie,IE User Data的知识点，在平时的项目中，有时候会用到这些东西，我老是会忘记，所以今天就总结一下。

localStorage
通过localStorage存储的数据是永久性的，除非你手动的去清除它，否则它一直有效。localStorage的作用域限定在文档源级别。什么是文档源，这里不做解释。还需要注意的是localStorage的作用域也受浏览器的限制。如果你用的chrome浏览器，下次用的是firefox，那么本次就无法访问到上一次的数据。

//存储api
localStorage.setItem(key,value);//以键值对的方式存储
localStorage.getItem(key);//获取对应的value
localStorage.removeItem(key);//删除
//在非IE8浏览器中还可以用delete来删除，如
delete localStorage.key;//undefined
localStorage.clear();//全部清空

下面附上localStorage的兼容性图：
Web客户端存储

sessionStorage
sessionStorage的存储有效期是在当前脚本所在的最*窗口或浏览器的标签。一旦窗口或者浏览器的标签页关闭，那么当前sessionStorage所存储的数据就被删除了。（要注意的是，现代浏览器有恢复会话的功能，这样sessionStorage存储的数据有效期更加长一些）。sessionStorage作用域也限定在文档源中。不仅如此sessionStorage的作用域还限定在最*窗口中。不同*窗口中sessionStorage数据不能共享。sessionStorage也拥有跟localStorage一样的api。

sessionStorage.setItem(key,value);//以键值对的方式存储
sessionStorage.getItem(key);//获取对应的value
sessionStorage.removeItem(key);//删除
//在非IE8浏览器中还可以用delete来删除，如
delete sessionStorage.key;//undefined
sessionStorage.clear();//全部清空

下面附上sessionStorage的兼容性图：
Web客户端存储

cookie
cookie因为实现早，所以兼容性会好一些，用跟服务器之间传递少量的数据。在你想用cookie来存储少量信息的时候，你应该首先去检测cookie是否可用。可以通过navigator.cookieEanbled这个属性实现，用也可以通过尝试写入cookie来测试。用cookie来存储信息是不安全的，所以不要用存储敏感信息。但是在https中是安全的，这不是因为cookie，而是因为通讯协议。

cookie的默认有效期也是很短的，它只持续在浏览的会话中，一旦浏览器关闭，cookie就失去了有效期。我们可以通过设置max-age延长cookie的有效期，单位是秒。

cookie的作用域也是通过文档源和文档路径来实现的。该作用域通过cookie的path和domain属性也是可以配置的。默认情况下：cookie跟创建的web页面有关，同目录或者子目录或者子目录的其他目录可见。如果我们想让其他页面也可见，可以设置path来实现。如果想让不同子域也可见，这时候就要设置domain。比如http:about.hao.com/http:home.hao.com；这时候把domain设置为“hao.com”.

//保存cookie；也以key=value的方式
document.cookie="key"+encodeURIComponent(value);
//设置有效期的时候
document.cookie="key"+encodeURIComponent(value)+"; max-age="+days*60*60*24";
//同样要设置path的时候，就像上面那样拼接字符串。
//获取cookie
var all=document.cookie;
list=all.split("; ");
//然后就去操作字符串，跟解码value就行了，这里不做详细的解析。

cookie的局限性：
Web客户端存储
4. IE User Data
IE5以及IE5以上版本浏览器通过在document元素后面添加一个的“DHTML行为”来实现客户端存储。

var memory=document.createElement("div");//创建div
memory.id="_memory";//设定一个id名
memory.style.display="none";//将其隐藏
memory.behavior="url('#default#userData')";//userData行为
document.body.append(memory);//添加到文档中
/*一旦赋予了userData行为，该元素就拥有了load()&&save()的方法。load方法用来载入数据，使用它必须传入一个字符串，类似文件名。载入数据后可以通过getAttribute()来查询这些数据，通过setAttribute()来设置数据，然后调用save()方法来保存数据。通过removeAttribute()来删除数据，然后调用save()来保存数据。*/
memory.load("myStorageData");
var name=memory.getAttribute("userName");

默认情况下，如果不手动去删除数据，永就不失效。但是也可以通过expires属性来指定它的过期时间。

var now=(new Date()).getTime();
var expires=now+100*60*60*24*1000;
expires=new Date(expires).toUTCString();
memory.expires=expires;

参考资料：javascript权威指南第六版。

秒客网

Web客户端存储

相关文章