cookies
//设置cookie
function setCookie(name, value, seconds) {
seconds = seconds || 0; //seconds有值就直接赋值,没有为0。
var expires = "";
if (seconds != 0 ) { //设置cookie生存时间
var date = new Date();
date.setTime(date.getTime()+(seconds*1000));
expires = "; expires="+date.toGMTString();
}
//转码并赋值
document.cookie = name+"="+escape(value)+expires+"; path=/";
}
//取得cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); //把cookie分割成组
for(var i=0;i < ca.length;i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0)==' ') { //判断一下字符串有没有前导空格
c = c.substring(1,c.length); //有的话,从第二位开始取
}
if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
//解码并截取我们要值
return unescape(c.substring(nameEQ.length,c.length));
}
}
return false;
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
localStorage
var storage=window.localStorage;
//设置localStorage
storage.setItem("docInfo","你好");
//获取localStorage
storage.getItem("docInfo");
//删除指定localStorage
storage.removeItem("docInfo");
//删除所有localStorage
storage.clear();
sessionStorage
var storage=window.sessionStorage;
//设置sessionStorage
storage.setItem("docInfo","你好");
//获取sessionStorage
storage.getItem("docInfo");
//删除指定sessionStorage
storage.removeItem("docInfo");
//删除所有sessionStorage
storage.clear();
测试:
//打开浏览器弹出“你好aaaaa”
localStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa
//注释第一行代码之后,再打开浏览器弹出“你好aaaaa”
//localStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa
//打开浏览器弹出“你好aaaaa”
sessionStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa
//注释第一行代码之后,再打开浏览器弹出“null”
//sessionStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//null
总结:
localStorage:永久保存,除非手动删除数据。数据完全存储在客户端。
sessionStorage:关闭浏览器之后自动删除数据。数据完全存储在客户端。
Cookie:在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭,如果不设置过期时间,会存在内存里,浏览器关闭即失效。数据在浏览器和服务器间来回传递。(判断用户是否登录——针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。)
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 可设置失效时间,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
参考资料:
http://han.guokai.blog.163.com/blog/static/13671827120112694851799/
https://segmentfault.com/a/1190000002723469
http://www.cnblogs.com/GumpYan/p/5708692.html