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中的信息
indexedDB
1.indexedDB 是一个运行在浏览器上的非关系型数据库,indexedDB支持多种数据格式，持久化存储、支持事务、游标、索引等数据库操作,同时indexedDB的存储空间大, 一般浏览器会分配50M-250M不等
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不会自动把数据发给服务器，仅在本地保存
网友评论