各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别

cookie

存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。
1.最早的本地存储方式，兼容性好
2.cookie优点Cookie的大小为4kb。cookie主要应用在保存用户身份信息。
3.当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中
4.cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取

locakStorage

1.HTML5新方法，IE8及以上浏览器都兼容

2.除非手动清除，否则永久保存在浏览器

3.存储大小一般为5MB

4.只存在于客户端（浏览器）中，不参与和服务器的通信

5.相同浏览器的不同页面间可以共享相同的 localStorage

6.不同浏览器无法共享localStorage或sessionStorage中的信息

sessionStorage

1 仅在当前会话下有效，浏览器被关闭或当前页面被关闭的情况下清除

2 存储大小一般为5MB

3 只存在于客户端（浏览器）中，不参与和服务器的通信

4 api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持

5 不同页面或标签页间无法共享sessionStorage的信息

6 不同浏览器无法共享localStorage或sessionStorage中的信息

indexDB

1.IndexDB 是一个运行在浏览器上的非关系型数据库，保存的数据很大
2.异步 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

和vuex的区别

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

注：大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

在了解了上述的前端的缓存方式后，我们可以看看针对不对场景的使用选择：

使用场景

标记用户与跟踪用户行为的情况，推荐使用cookie
适合长期保存在本地的数据（令牌），推荐使用localStorage
敏感账号一次性登录，推荐使用sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，推荐使用indexedDB

注意

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

摘抄“https://blog.csdn.net/ruantianqing/article/details/113001623?ops_request_misc=&request_id=&biz_id=102&utm_term=html%E5%90%84%E7%A7%8D%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E5%8C%BA%E5%88%AB%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-2-113001623.142^v2es_vector,143^v4register&spm=1018.2226.3001.4187

摘抄https://zhuanlan.zhihu.com/p/91990957

摘抄链接：https://juejin.cn/post/7047404366218657800