cookie

MDN地址

类型-时效性

• 会话性：默认不设置过期时间，保存在内存中；关闭浏览器、用户手动清除 则cookie失效
• 持久性：设置了过期时间，保存在硬盘中；过期时间到、用户手动清除 则cookie失效

共享性

同一浏览器下的同一个域名下共享(同一浏览器的不同网页窗口共享)

存储大小

单个4KB

是否参与HTTP请求

每次请求都会携带在http请求头中，存储过多会cookie会造成性能的浪费

应用场景

可用于登录识别用户

用法（原生）

• 写入

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 显示: name=oeschger;favorite_food=tripe

• 读取

document.cookie = "test1=Hello";
document.cookie = "test2=World";
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
alert(myCookie);
// 显示: World

推荐第三方库

js-cookie、 cookie

sessionStorage

MDN地址

时效性

关闭浏览器的网页窗口、用户手动清除 则失效

共享性

同一浏览器的不同网页窗口不共享，只在当前网页窗口有效

存储大小

单个5MB

是否参与HTTP请求

仅在客户端（即浏览器）中保存，不参与和服务器的通信

用法

• 写入

sessionStorage.setItem('key', 'value');

• 读取

sessionStorage.getItem('key');

• 删除单个

sessionStorage.removeItem('key');

• 删除全部

sessionStorage.clear();

localStorage

MDN地址

时效性

长期有效，不管是关闭网页窗口还是浏览器都不会失效，只能手动清除

存储大小

单个5MB

是否参与HTTP请求

仅在客户端（即浏览器）中保存，不参与和服务器的通信

用法

• 写入

localStorage.setItem('key', 'value');

• 读取

localStorage.getItem('key');

• 删除单个

localStorage.removeItem('key');

• 删除全部

localStorage.clear();

注意 应该注意，存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就
是说 http://example.com 与 https://example.com 的 sessionStorage 相互隔离。

总结

类型	时效性	共享性	大小	参与
cookie	设置过期时间，时间到则失效；未设置过期时间，浏览器关闭失效	同域名下共享	单个4KB，一般可存储50个，Opera为30个	参与，携带在http请求头中
sessionStorage	网页窗口关闭则失效	只在当前网页窗口中可访问	单个5MB	不参与
localStorage	永久存储，除非手动清除	在特定页面协议内访问	单个5MB	不参与