浏览器本地存储

本地存储：https://www.jianshu.com/p/ed6ca541a321

HTTP缓存：https://www.jianshu.com/p/be6c3ae61b51
浏览器本地缓存最常用的时cookie，storage , web SQL , indexDB,

cookie:

cookie的用法很简单,可以通过服务端设置，js也可以通过documnet.cookie="名称=值;"（不要忘记以;分割）来设置。
cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).
cookie一般用做为登陆态保存、密码、个人信息等关键信息保存使用，所以为了安全也是遵守同源策略原则的。
可以通过下面参数具体设置：
path=path (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
domain=domain (例如 'example.com'， 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。与早期规范相反的是，在域名前面加 . 符将会被忽视，因为浏览器也许会拒绝设置这样的cookie。如果指定了一个域，那么子域也包含在内。
max-age=max-age-in-seconds (例如一年为606024*365)
expires=date-in-GMTString-format 如果没有定义，cookie会在对话结束时过期这个值的格式参见Date.toUTCString()
secure (cookie只通过https协议传输)
HttpOnly 限制web页面程序的browser端script程序读取cookie。适合防止通过XSS(跨站点脚本攻击)造成的数据泄露

Cookie会在自动附加到每个请求上，HTTP是无状态的，所以cookie允许将信息存储在客户端上。
缺点
容量有限制，不能超过4kb
在请求头上带着数据安全性差

localStorage和sessionStorage使用

localStorage生命周期时永久的，除非主动清除，否则信息会永久存在，存放数据大小一般为5MB,sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。也是遵守同源策略原则的
LocalStorage 不提供搜索功能，不能建立自定义的索引

Web SQL

WebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。并且，当前只有谷歌支持，ie和火狐均不支持。

image.png

最终的数据去向，我理解为只是做临时存储和大型网站的业务运行存储缓存的作用，页面刷新后该库就不存在了。而其本身与关系数据库的概念比较相似。

indexDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
特点：

1. 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
2. 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
3. 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
4. 同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
5. 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
6. 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
   indexDB 案例
   支持简单的增删改查，欢迎star
   github链接：https://github.com/Xialulu/IndexDBDemo

参考链接：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html