持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
这一节我们来说一下本地缓存，前端最常见的本地缓存主要有三种：
- cookie
- sessionStorage
- localStorage 还有一种较为少见比如indexedDB
- indexedDB
cookie
Cookie是为了解决 HTTP无状态导致的问题，通常用来放一些token之类的能够识别用户信息的数据，由后端返回进行设置，一般不超过 4KB ，它由一个键值对和其它几个用于控制 cookie有效期、安全性的属性组成，我们可以打开浏览器从控制台看到每个页面的Cookies，cookies的存储是以键值对的形式进行存储的，如果页面没有用到cookies 的话在控制台则不会显示，cookies会自动被带到每个请求中，由于cookies中可能保存着我们或者是用户的信息，所以cookie比较注重安全性，需要的情况下需要对cookie的某些属性进行设置，比如设置不允许JS操作获取cookie，这样是为了限制一些脚本在使用网站的时候恶意获取cookie进行其他操作，也就是我们常见的前端安全攻防的一部分
cookie在每次请求中都会被发送，我们需要使用 HTTPS并对其加密，不然我们的信息很容易被窃取，导致安全风险。比如我们在一些使用 cookie保持登录态的网站上，如果 cookie被窃取，他人会利用你的 cookie来扮演你登录网站
localStorage
可以用来存储一些比较常用到的数据，比如我们点击一个商品详情的页面中，我们可以将该商品的id缓存下来，到后续需要对该商品进行其他操作，比如购买，评价，等对商品操作的时候可以直接利用上个页面缓存下来的商品id进行接口的请求交互，这样方面我们进行一些数据的操作，localstorage是的时间存储比较长，如果不删除的话是不会消失的，所以也可以用来缓存一些比较长时间不会更改的数据，也可以是一些比较大的数据，如果这些数据的变更较少的话，可以直接在缓存中使用，减少对大数据的请求，减少页面的请求时间。
- 生命周期：持久化的本地存储，除非主动删除数据，否则不会过期的
- 同一域中是共享的
- 当本页操作（新增、修改、删除）了
localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。 - 大小：5M
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间- 受同源策略的限制
sessionStorage
sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据
IndexedDB
IndexedDB用来存储大量数据的场景
特点
- 储存量大
- 异步操作都是的，操作性能更高，
- 原生支持储存
JS的对象 - 类似于数据库
- 操作非常繁琐
二、区别
关于cookie、sessionStorage、localStorage三者的区别主要如下：
- 大小：
cookie数据大小4k，sessionStorage和localStorage可以达到5M或更大 - 时间：
localStorage存储持久数据，关闭浏览器后数据不丢失，除非主动删除数据；sessionStorage关闭后浏览器窗口自动删除；cookie设置的cookie过期时间之前一直有效 - 交互方式：
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage仅在本地保存
场景
日常中storage使用的场景比较多，比如对一些页面跳转数据的存储，或者一些独立数据的存储，在使用方面比较方便，只要通过API的设置和获取就可以对数据进行操作，有时也可以对一些较少更新的数据做一些存储，不用二次请求接口进行获取数据，直接从本地获取，节省请求接口的时间，如果是一些数据量比较大的条件下，比如是做一些在线文档和富文本的数据，可以尝试着使用indexDB进行操作，类似于直接将数据放到数据库中进行保存。比如跟踪用户行为使用cookie数据需要长期保存在使用localStorage用户一次性登录使用sessionStorage需要用到存储大量数据的情况、在线文档保存编辑历史的情况使用indexedDB
