| 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()+5); 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 设置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)