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

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

一、区别

简单说说具体的区别：

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	无法直接使用，需要模拟	需要模拟	需要模拟

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