前端缓存方式以及区别(vue项目)

前端缓存方式以及区别(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 (***ame, value, expire) {
  var date = new Date()
  date.setSeconds(date.getSeconds() + expire)
  document.cookie = ***ame + '=' + escape(value) + '; expires=' + date.toGMTString()
  // console.log(document.cookie)
}
 
export function getCookie (***ame) {
  if (document.cookie.length > 0) {
    let cstart = document.cookie.indexOf(***ame + '=')
    if (cstart !== -1) {
      cstart = cstart + ***ame.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 (***ame) {
  setCookie(***ame, '', -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.*** 和 blog.example.***),它们之间的 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.***/weixin_46846007/article/details/131165731
       https://blog.csdn.***/by_side_with_sun/article/details/92400853
       https://blog.csdn.***/weixin_43416349/article/details/120593476
       https://www.***blogs.***/mmzuo-798/p/10259834.html
       https://blog.csdn.***/qq_40856225/article/details/81974582
       https://www.shence123.***/s/23796.html

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端缓存方式以及区别(vue项目)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买