前端缓存方式以及区别（vue项目）

一、缓存方式含有哪几种

       vuex、cookie、sessionStorage、localStorage

二、区别

1、vuex

vuex主要用于vue 组件之间的通信，页面一刷新数据就会消失。
原因：
       vuex 是挂载到vue实例上的，相当于全局变量，当页面一刷新，页面重新加载vue 实例，vuex里面的数据被重新赋值。
使用：
https://vuex.vuejs.org/zh/
一般结合localStorage、sessionStorage一起使用

2、cookie

       cookie 浏览器存储，具有存储大小（不能大于4K）和有效期限制（vue中默认有效时间为浏览器关闭，也可以和后台交互设置有效时间来存储，也可以设置，google的setting里面，可以去找找/控制台的Application里面）
使用：

export function setCookie (cname, value, expire) {
  var date = new Date()
  date.setSeconds(date.getSeconds() + expire)
  document.cookie = cname + '=' + escape(value) + '; expires=' + date.toGMTString()
  // console.log(document.cookie)
}
 
export function getCookie (cname) {
  if (document.cookie.length > 0) {
    let cstart = document.cookie.indexOf(cname + '=')
    if (cstart !== -1) {
      cstart = cstart + cname.length + 1
      let cend = document.cookie.indexOf(';', cstart)
      if (cend === -1) {
        cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
    }
  }
  return ''
}
 
export function delCookie (cname) {
  setCookie(cname, '', -1)
}

3、sessionstorage （临时存储）

       会话级别，大小限制为5M，关闭页面或这浏览器数据就会被删除。
       将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
使用：
       1.查询数据：sessionStorage.getItem(‘token’)
       2.修改数据：sessionStorage.setItem(‘token’, ‘lalla’)
       3.删除数据/全删除：sessionStorage.removeItem(“token”) | sessionStorage.clear()
       

4、localStorage（本地存储）

       永久存储在本地，除非主动删除
       将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
使用：
       1.查询数据：localStorage.getItem(‘dataTest’)
       2.修改数据：localStorage.setItem(‘dataTest’, ‘这是测试的’)
       3.删除数据/全删除：localStorage.removeItem(‘dataTest’) | localStorage.clear()
localStorage的优势以及其注意点：
       在存储方面localstorage和sessionStorage具有巨大优势，大小为5M，比cookie大多了，所以可以用localStorage来做一些相对不太会改变的数据缓存或者说可以缓存用户的足迹，换个说法，localStorage是一个小型的数据库
注意点：
1、兼容性

2、localStorage的值为string类型，这就说明我们在使用的时候要进行类型转换
3、在浏览器隐私模式下不可读取
4、不同浏览器无法共享localStorage
不同浏览器无法共享localStorage，相同浏览器的不同页面可以共享相同的localStrage（页面属于相同域名和端口），但是不同页面或标签间无法共享sessionStorage的信息（页面以及标签页仅指顶级窗口，如果一个页面包含多个iframe标签且他们属于同一个源页面，那么他们之间可以共享sessionStorage）
5、localStorage不能被爬虫获取
6、存储过多会导致页面卡，因为localStorage本质是对字符串的读取。
7、localStorage 是同步写入的，如果写入较大的数据可能会阻塞页面渲染。这是不推荐的。对于较大的数据存储，最好使用异步的方式来缓解这个问题。
8、值得注意的是，存储限制是针对每个来源（域名和协议组合）的。这意味着如果你的网站使用了不同的子域名（例如，www.example.com 和 blog.example.com），它们之间的 localStorage 存储是独立的，每个子域名都有自己的 5MB 的存储空间。当 localStorage 存储空间达到限制时，再次写入数据将会触发“QUOTA_EXCEEDED_ERR”错误，表示超过了存储配额。解决这个问题的方法包括清除不再需要的数据、压缩数据以减小大小，或者使用其他类型的存储（例如 IndexedDB）来替代 localStorage。

结论：

使用需考虑存储数据的大小，存储时间以及是否需要和服务器交互等因素。
       1、一般vue会选择sessionStorage，因为一是vue是单页面应用，操作都是在一个页面跳转路由，二是可以保证打开页面时，sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据
       2、cookie的数据会自动传递到服务器端，服务器端也可以写cookie到客户端
       3、localStorage和sessionStorage不会把数据自动传到服务器端，仅在本地存储
       4、localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
       5、vuex主要用于组件之间的传值，localstorage，sessionstorage用于不同页面之间的传值。
本文参考：
       https://blog.csdn.net/weixin_46846007/article/details/131165731
       https://blog.csdn.net/by_side_with_sun/article/details/92400853
       https://blog.csdn.net/weixin_43416349/article/details/120593476
       https://www.cnblogs.com/mmzuo-798/p/10259834.html
       https://blog.csdn.net/qq_40856225/article/details/81974582
       https://www.shence123.com/s/23796.html