js本地存储

本地存储

随着网页规模越来越大，打开网页时或切换页面时，如果每次都从服务器获取数据，会加大服务器的压力。此时，就需要一次性的把前端经常使用的数据获取，存储到前端本地。

本地存储的方式

1、Cookie

早期使用的一种本地存储技术：

1. cookie本地和服务器都可以共同访问的。

2. 访问速度比较慢。

3. 存储的容量比较小。

4. cookie服务器访问时有域名和路径的限制。

5. cookie不能主动删除，只能通过过期时间来设置可访问事件区间

cookie的主要属性有，用于设置cookie过期时间的Expires；Max-Age 用于设置在 Cookie 失效之前需要经过的秒数（优先级比Expires高）；Domain指定了 Cookie 可以送达的主机名；Path指定了一个 URL路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部；标记为 Secure的 Cookie只应通过被HTTPS协议加密过的请求发送给服务端

cookie经常用在：

1. 用来记录用户的浏览习惯，以便于下次访问时有针对性的提供服务。

2. 登录状态的保持：

localStorage

为了解决cookie本地访问速度慢、容量小的问题，h5推出的新的本地存储方案，只能本地访问，速度快，容量大。

持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。存储的信息在同一域中是共享的。

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡受同源策略的限制

localStorage的使用 

       // 新增

        // localStorage.setItem('姓名', '张三');

        // 读取

        // localStorage.getItem('姓名');

        // 移除

        // localStorage.removeItem('abc')

        // 清除全部

        // localStorage.clear()

localStorage 也不是完美的，它有两个缺点：

无法像Cookie一样设置过期时间

只能存入字符串，无法直接存对象

3、sessionStorage

sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据

4、IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

优点：

储存量理论上没有上限

所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时

原生支持储存JS的对象

缺点：

 操作非常繁琐本身有一定门槛

关于cookie、sessionStorage、localStorage三者的区别主要如下：

存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

应用场景

标记用户与跟踪用户行为的情况，推荐使用cookie

适合长期保存在本地的数据（令牌），推荐使用localStorage

敏感账号一次性登录，推荐使用sessionStorage

存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，推荐使用indexedDB