前端缓存方式以及区别（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