浏览器存储

一、Cookie

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。

通过 document.cookie = ‘….’ 操作。

cookie的缺点：

• 有大小限制，最大4KB
• http请求时需要发送到服务端，增加请求数据量

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

二、Web Storage API

Web Storage 包含如下两种机制：

• sessionStorage： 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
• localStorage： 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
• 这两个有一点跟Cookie一样，就是针对一个域名，即在同一个域名下，才可以随意存取，在A域名存，B域名下取不出。

// 保存数据
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');
// 获取数据
let sData = sessionStorage.getItem('key');
let lData = localStorage.getItem('key');
// 删除保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
// 删除所有保存的数据
sessionStorage.clear();
localStorage.clear();

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API