标签：
Cookie
每个域名存储量比较小（各浏览器不同，大致4K）
所有域名的存储量有限制（各浏览器不同，大致4K）
有个数限制（各浏览器不同）
会随请求发送到服务器
LocalStorage
永久存储
单个域名存储量比较大（推荐5MB，各浏览器不同）
总体数量无限制
浏览器关闭不清除。页面之间可以实现共享。同一域名下实现共享
只要不清除。可以在本地永久储存。
SessionStorage
只在 Session 内有效
存储量更大（推荐没有限制，但是实际上各浏览器也不同）
浏览器关闭则清除。不同的窗口之间不能共享。同一域名下实现共享
三者异同点：
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | |
示例代码一：var body = document.body; var pcolor = document.querySelector(‘p‘); var clear = document.querySelector(‘#clear‘); var bgcolorForm = document.querySelector(‘#bgcolor‘); var colorFrom = document.querySelector(‘#fcolor‘); if(!localStorage.getItem(‘bgcolor‘)){ populateStorage(); }else{ setStyle(); } function populateStorage(){ localStorage.setItem(‘bgcolor‘,bgcolorForm.value); localStorage.setItem(‘color‘,colorFrom.value); setStyle(); } function setStyle(){ var currentBgColor = localStorage.getItem(‘bgcolor‘); var currentColor = localStorage.getItem(‘color‘); bgcolorForm.value = currentBgColor; colorFrom.value = currentColor; body.style.backgroundColor = currentBgColor; pcolor.style.color = currentColor; } function clearFn(){ localStorage.clear(); } bgcolorForm.addEventListener(‘change‘,populateStorage,false); colorFrom.addEventListener(‘change‘,populateStorage,false); clear.addEventListener(‘click‘,clearFn,false);
示例代码二：
function unlock(i, station_name_cn, station_name_en) { var locking = localStorage.getItem(‘lock‘); if (locking && locking == 1) { localStorage.setItem("lock", i); // console.log(localStorage.getItem(‘lock‘)); window.location.href = ‘unlock.html?‘ + station_name_cn + ‘-‘ + station_name_en; } } if (station_id > 1) { if (!localStorage.getItem(‘lock‘) || localStorage.getItem(‘lock‘) != station_id) { localStorage.setItem("lock", 1); } // unlock(station_id,station_name_cn,station_name_en); }
参考资料：MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API
详说 Cookie, LocalStorage 与 SessionStorage
HTML5本地存储localStorage和sessionStorage…
标签：
原文地址：http://www.cnblogs.com/qianduanjingying/p/5885843.html
