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…