侧边栏壁纸
博主头像
极简笔记博主等级

极简笔记,书写你的精彩程序人生!

  • 累计撰写 147 篇文章
  • 累计创建 24 个标签
  • 累计收到 8 条评论

目 录CONTENT

文章目录

浏览器缓存 cookie、localStorage、sessionStorage 三者有什么区别?

极简笔记
2023-04-24 / 0 评论 / 0 点赞 / 581 阅读 / 999 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-04-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

cookielocalStoragesessionStorage 都是浏览器存储数据的方式,但它们在存储位置、作用域、有效期等方面有所不同。

一、区别

简单说说具体的区别:

  1. cookie:存储在客户端,每次请求服务器时都会发送到服务器,大小限制为4KB左右。可以通过设置过期时间来控制失效时间。cookie可以被JavaScript读取或修改,并且可以设置跨域。

  2. localStorage:与cookie一样,也是存储在客户端,但是不会发送到服务器,大小限制为5-10MB。localStorage不受同源策略限制,可以在同一浏览器的所有窗口中进行访问。localStorage是永久性存储,除非被手动清除,否则数据不会过期。

  3. sessionStorage:也是存储在客户端,但是与localStorage不同的是,sessionStorage在会话结束时会被清除,会话结束指的是关闭浏览器标签页或浏览器窗口,大小也限制为5-10MB。

cookie适合存储需要在多个页面和服务器之间共享的数据,localStorage适合长期存储不频繁修改的数据,而sessionStorage适合存储一次会话所需的临时数据。

二、使用

那么,我们在vue中如何使用它们呢?

  1. 在Vue中使用cookie
    在Vue中使用cookie,需要先引入js-cookie库。可以通过npm进行安装,也可以在HTML中引入CDN。
# 通过npm安装js-cookie
npm install js-cookie --save

在Vue组件中使用cookie,可以通过下列代码进行设置、获取和删除操作:

import Cookies from 'js-cookie'

// 设置cookie
Cookies.set('name', 'binjie')

// 获取cookie
Cookies.get('name')

// 删除cookie
Cookies.remove('name')
  1. 在Vue中使用localStorage
    在Vue中使用localStorage,可以直接使用JavaScript提供的window.localStorage对象进行操作。
// 设置localStorage
window.localStorage.setItem('name', 'binjie')

// 获取localStorage
window.localStorage.getItem('name')

// 删除localStorage
window.localStorage.removeItem('name')
  1. 在Vue中使用sessionStorage
    与localStorage类似,在Vue中使用sessionStorage也可以直接使用JavaScript提供的window.sessionStorage对象进行操作。
// 设置sessionStorage
window.sessionStorage.setItem('name', 'binjie')

// 获取sessionStorage
window.sessionStorage.getItem('name')

// 删除sessionStorage
window.sessionStorage.removeItem('name')

写一个demo代码如下:

<template>
  <div>
    <p>cookie: {{cookieName}}</p>
    <p>localStorage: {{localStorageName}}</p>
    <p>sessionStorage: {{sessionStorageName}}</p>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      cookieName: '',
      localStorageName: '',
      sessionStorageName: ''
    }
  },
  mounted() {
    // 设置cookie
    Cookies.set('name', 'binjie')

    // 获取cookie
    this.cookieName = Cookies.get('name')

    // 设置localStorage
    window.localStorage.setItem('name', 'binjie')

    // 获取localStorage
    this.localStorageName = window.localStorage.getItem('name')

    // 设置sessionStorage
    window.sessionStorage.setItem('name', 'binjie')

    // 获取sessionStorage
    this.sessionStorageName = window.sessionStorage.getItem('name')
  }
}
</script>

在该Vue组件中,会分别使用cookie、localStorage和sessionStorage存储name属性,并在mounted时读取并显示在页面上。

三、兼容性

下表列举了cookie、localStorage和sessionStorage在不同浏览器和环境下的兼容性情况:

浏览器/环境 cookie localStorage sessionStorage
IE 6-7 ✔️
IE 8-9 ✔️
IE 10及以上 ✔️ ✔️ ✔️
Firefox 2+ ✔️ ✔️ ✔️
Chrome 4+ ✔️ ✔️ ✔️
Safari 4+ (Mac) ✔️ ✔️ ✔️
Safari (iOS 3.2+) - iPhone ✔️ ✔️ ✔️
Safari (iOS 3.2+) - iPad ✔️ ✔️ ✔️
Opera 10.50+ ✔️ ✔️ ✔️
Android 2.1+ Browser ✔️ ✔️ ✔️
Android 2.1+ WebView/Safari ✔️ ✔️ ✔️
微信 ✔️ ✔️ ✔️
Safari 隐身模式(所有浏览器) ✔️
安卓4.3以下 (所有浏览器) ✔️
Web Worker 无法直接使用,需要模拟 需要模拟 需要模拟

✔️ 表示得到支持,❌ 表示不被支持。

0

评论区