用途
cookie
主要用于保存登录信息。
sessionStorage
对象存储会话数据,数据在浏览器关闭后就会被销毁。
localStorage
会永久存储会话数据,除非主动删除,否则数据会一直存在。
区别
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 一般由服务器生成,可设置失效时间,如果在浏览器端生成Cookie,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
用法
localStorage
和sessionStorage
localStorage
和sessionStorage
都具有相同的操作方法,例如setItem
、getItem
、removeItem
和clear
等:
setItem
将value
存储到key
字段。
sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");
getItem
获取指定key
本地存储的值。
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("key");
removeItem
删除指定key
本地存储的值。
sessionStorage.removeItem("key");
localStorage.removeItem("key");
clear
清除所有的key/value
。
sessionStorage.clear();
localStorage.clear();
cookie
cookie
的接口一般情况下都要自己封装。
function setcookie(name,value,days){
var date=new Date();
date.setDate(date.getDate()+days);
document.cookie=name+'='+value+';expires='+date;
}
function getcookie(name){
var arr=document.cookie.split(';');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name)return arr2[1];
}
return '';
}
function removecookie(name){
setcookie(name,'1',-1);
}