cookie、locakstorage、sessionstorage的区别

	cookie	localstorage	sessionstorage
数据的生命周期	可以设置失效时间，一般默认为浏览器关闭后	若不被清除，则永久保存	存在于一次会话中，刷新页面数据仍然存在，但关闭页面或浏览器失效
存储数据的大小	大约4k	大约5MB	大约5MB
与服务端通信	每次都会携带在http头中，使用cookie保存过多数据会带来性能问题	客户端存储，不参与服务端通信	客户端存储，不参与服务端通信
易用性	原生的cookie接口不友好，需要程序员自己封装	可以使用原生接口，也可以自己封装，对object和array有更好的支持	可以使用原生接口，也可以自己封装，对object和array有更好的支持
应用场景	用户登录：对于登录过的用户，再次登录时想cookie中插入一段加密过的唯一识别该用户的辨识码，下次只要读取这个值就可以判断该用户是否登录。曾经用于电商网站用户购物车信息，现在一般用localstorage	HTML5游戏需要本地存储，可以用localstorage	当有比较多的表单信息，为了更好地用户体验，需要分为若干子页面给用户填写，这时用sessionstorage

cookie:

1、不同浏览器存储cookie的位置不同（浏览器差异）

2、按域名存储，不同域名的网站cookie存储的位置不同

3、按名值对存储

documen.cookie 可读可写的属性

设置cookie过期时间，5天之后过期

var date=new Date();

date.setDate(date.getDate()+);
date.toGMTString();

document.cookie='username=lily;expires='+date;

//过期日期date必须是字符串格式时间类型的数据

编码与解码：encodeURI(字符)，decodeURI(字符)

document.cookie返回的各名值对以‘； ’隔开，以下函数根据cookie名获取对应值

function getCookie(key){

var arr1=document.cookie.split('; ');

for(var i=0;i<arr1.length;i++){

    var arr2=arr1[i].split('=');

    if(arr2[0]==key)

    return arr2[1];

}

设置cookie

function ssetCookie(key,value,t){//t为过期时间

var date=new Date();

date.setDate(date.getDate()+t);

document.cookie=key+'='+value=';expires='+date.toGMTString();

}

安全性：不要用他们存储敏感数据

XSS：跨站脚本攻击 (crossing site scripting)

秒客网

cookie、locakstorage、sessionstorage的区别

相关文章