基本概念
cookie：存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间（默认过期时间为关闭浏览器时）。 cookie会在每次发送HTTP请求时附加到Cookie头字段，服务器以此得知用户所处的状态。 cookie限制在4kb
sessionStorage：会话存储，存储在本地，不会被发送到服务器上，并且关闭后存储的内容失效。最多可以存储5-10M
localStorage：本地存储，不会被发送到服务器上，默认会永久存储，除非手动删除。最多可以存储5-10M
Storage支持的浏览器版本
imp.png
差异
| 特性 | 数据的生命周期 | 存储大小 | 发送服务端 | 易用性 |
|---|---|---|---|---|
| cookie | 关闭浏览器实效（可配置） | 4kb | 携带在HTTP头中 | 差 |
| sessionStorage | 当前会话下有效，关闭页面或浏览器后被清除 | 5mb | 需要在代码里主动上传服务端 | 好 |
| localStorage | 永久有效，除非手动删除 | 5mb | 需要在代码里主动上传服务端 | 好 |
使用
cookie：
//记录cookie值
function setCookie (name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
};
//获取cookie值
function getCookie (name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr !== null){
return unescape(arr[2]);
}else{
return null;
}
};
//删除cookie值
function deleteCookie (name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie = name + "=; expires=" + exp.toGMTString();
};
sessionStorage：
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
localStorage：
// 保存数据到localStorage
localStorage.setItem('key', 'value');
// 从localStorage获取数据
var data = localStorage.getItem('key');
// 从localStorage删除保存的数据
localStorage.removeItem('key');
// 从localStorage删除所有保存的数据
localStorage.clear();
