浏览器 LocalStorage、SessionStorage 与 Cookie 区别

Cookie

1. 大小约为4KB。
2. 当浏览器发送请求到服务器后，返回的响应头中会带有一个Set-Cookie的信息，只要浏览器看到这个信息，就会将Cookie写入。
3. 当浏览器再次发送请求时，会自动携带上Cookie到服务器端。
4. 为了让服务器可以识别用户身份，所有请求都会自动携带该域名的Cookie。

LocalStorage

1. 键值对形式，键和值都只能存储字符串，如果是对象或数字会自动转换为字符串。
2. 在浏览器上查看方式：
   • Chrome：F12 > Application > LocalStorage
3. 默认大小为5MB。
4. 不像Cookie会随请求发送到服务器端，存储只在客户端浏览器生效，因此可以减少网络流量。
5. 生命周期（没有过期时间，除非手动删除），清空LocalStorage的时机：
   • 域名变动（二级域名.主域名）：主域名、二级域名不共享。
   • 开启无痕窗口：清空。
   • F5刷新：不清空。
   • Ctrl+F5：不清空。
   • 开新标签页：不清空。
   • 关闭浏览器再打开：不清空。

实际操作

//LocalStorage
//存储数据
localStorage.setItem('Account', 'aaa');
//获取数据
localStorage.getItem('Account');
//移除特定数据
localStorage.removeItem('Account');
//一次性全部清除
localStorage.clear();

SessionStorage

1. 除清空时机外，其他机制与LocalStorage相同。
2. 清空LocalStorage的时机：
   • 域名变动（二级域名.主域名）：主域名、二级域名不共享。
   • 开启无痕窗口：清空。
   • 开新标签页（非复制）：清空。
   • 关闭浏览器再打开：清空。
   • F5刷新：不清空。
   • Ctrl+F5：不清空。
   • 开新标签页（复制）：不清空。

实际操作

//SessionStorage
//存储数据
sessionStorage.setItem('Account', value);
//获取数据
sessionStorage.getItem('Account');
//移除特定数据
sessionStorage.removeItem('Account');
//一次性全部清除
sessionStorage.clear();