cookie 是HTTP请求发送Set-Cookie HTTP头作为响应的一部分，通过name=value的形式储存的字符串string。

前端收到该响应后，会将cookie保存在浏览器内，并在每次的用户请求中携带该字符串

cookie 的作用是与服务器进行交互，是主要的储存方式，可以兼容包括IE6以上的所有浏览器。

cookie 数据会带到 Http Header 的字段里面，每次同主域名的请求中，都会传递数据

数据生命期 data expiry:可设置失效时间，默认是关闭浏览器后失效

与服务器通信 server connection: 每次都携带在HTTP Header 里面，如果使用Cookie保存过多, 会带来性能问题

易用性 usability: 需要自己封装，源生的Cookie接口不友好

应用场景：保存登录信息，创建购物车，跟踪用户行为 .txt

数据生命周期: 除非被清除，否则永远保存在本地

数据生命周期: 存储周期为当前会话，数据会在浏览器browsing session 结束时被清除，就是浏览器被关闭时，前进，后退，刷新数据依然存在。

存放数据大小: 5-10MB

与服务器通信: 在浏览器保存，不参与和服务器的通信

易用性: 源生接口可用，也可再次封装，对 Object Array 有更好的支持

储存值只能是字符串的形式，对于非字符串的数据，一般需要使用JSON.stringify方法压缩成字符串，使用时再用JSON.parse进行分析。

与服务器端通信: 仅在客户端保存，不参与和服务器的通信

易用性: 源生接口可用，也可再次封装，对 Object Array有更好的支持

储存值只能是字符串的形式，对于非字符串的数据，一般需要使用JSON.stringify方法压缩成字符串，使用时再用JSON.parse进行分析。

方法:
setItem("key", "value");
getItem("key");
removeItem("key");
clear()
key(index), 获取已知位置的key
length: 已经储存物品的数量

SameSite, 为防止CSRF (Cross Site Request Forgery 跨站请求伪造) 攻击和用户追踪而新增的安全

Secure, 安全标志。设置参数后，该cookie只在https请求中才会被携带

Path, cookie的存储路径，默认是当前项目的根路径

Domain,既该网站所在的域, 域不区分端口号

Application Cache，是浏览器的缓存中分出来的一块缓存区

要想在这个缓存中保存数据，可以使用一个描述文件 manifest file, 列出要下载和缓存的资源

Application Cache 通过 mainfest 文件指定了缓存的资源，可以使应用在断网的时候也能够使用

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

方法:
setItem("key", "value");
getItem("key");
removeItem("key");
clear()
key(index), 获取已知位置的key
length: 已经储存物品的数量

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文

打开多个相同的URL的Tabs页面，会创建各自的sessionStorage

storage受到domain/protocol/port triplet的限制，不同的protocol (协议)或者subdomain内部有不同的storage对象，他们无法获取对方的数据

可以强制使用HTTPS

作用域：独立域名，子域名

包含所有(key/oldValue/newValue)的数据，和文档url, 存储对象 storageArea.

window.onstorage = event => {
if (event.key != 'now') return;
alert(event.key + ':' + event.newValue + " at " + event.url);
};
localStorage.setItem('now', Date.now());

如果两个window都在监听window.onstorage, 其中一个更新的时候，另一个也会更新

event.storageArea 包含storage object, 此event对于sessionStorage, localStorage相同，所以event.storageArea引用被修改的event。

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>

Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>

Set-Cookie: <cookie-name>=<cookie-value>; Secure

Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure

Session cookie: 不明确Expires/Max-Age，浏览器会话关闭时会被删除

Persistent cookie: 明确Expires/Max-Age, 通常来说 cookie 不会在关闭浏览器时失效，但是会在一个明确的日期(Expires) 或者时长(Max-Age) 失效。

低级API，用于客户端存储大量结构化数据(包括文件和blobs Binary long Object 二进制长对象)

对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误

IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作

意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况

网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

https://www.cnblogs.com/fundebug/p/about-browser-storage.html

大部分操作并不是常用的调用方法，返回结果的模式，而是请求——响应的模式

这条指令并不会返回一个DB对象的句柄，得到的是一个IDBOpenDBRequest对象

控制台得到一个 IDBDatabase对象，这就是IndexedDB对象

function closeDB(){ db.close();}

function deleteDB(){indexedDB.deleteDatabase(name)}