vue浏览器缓存sessionStorage、localStorage、Cookie

在 Vue.js 项目中，管理浏览器缓存是常见的需求，主要可以通过 sessionStorage、localStorage 和 Cookie 来实现。下面分别介绍这三种方式及其用法。

1. sessionStorage

sessionStorage 用于存储在会话（即浏览器窗口关闭前）期间的数据。每次打开一个新的窗口或标签页都会有一个新的会话。

使用方法

• 存储数据

  sessionStorage.setItem('key', 'value');
  

• 获取数据

  const value = sessionStorage.getItem('key');
  

• 删除数据

  sessionStorage.removeItem('key');
  

• 清除所有数据

sessionStorage.clear();

在 Vue 组件中使用

<template>
  <div>
    <button @click="saveSession">Save to Session</button>
    <button @click="getSession">Get from Session</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveSession() {
      sessionStorage.setItem('username', 'JohnDoe');
    },
    getSession() {
      const username = sessionStorage.getItem('username');
      console.log(username);
    }
  }
}
</script>

2. localStorage

localStorage 用于长期存储数据，即使浏览器关闭后数据仍然存在。除非明确删除，否则数据会一直保存在浏览器中。

使用方法

存储数据
localStorage.setItem('key', 'value');
获取数据
const value = localStorage.getItem('key');
删除
localStorage.removeItem('key');
清除所有
localStorage.clear();

​

在 Vue 组件中使用

<template>
  <div>
    <button @click="saveLocal">Save to Local</button>
    <button @click="getLocal">Get from Local</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveLocal() {
      localStorage.setItem('username', 'JaneDoe');
    },
    getLocal() {
      const username = localStorage.getItem('username');
      console.log(username);
    }
  }
}
</script>

3. Cookie

Cookie 用于在客户端存储少量数据，并可以在请求时发送到服务器。适用于存储需要与服务器交互的数据。

使用方法

存储数据
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
获取数据
获取 Cookie 需要自行解析字符串，常用封装方法如下：
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 删除数据
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

在 Vue 组件中使用

<template>
  <div>
    <button @click="saveCookie">Save to Cookie</button>
    <button @click="getCookie">Get from Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveCookie() {
      document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
    },
    getCookie() {
      const getCookie = (name) => {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
      };
      const username = getCookie('username');
      console.log(username);
    }
  }
}
</script>

总结

• sessionStorage：适用于存储会话数据。
• localStorage：适用于存储长期数据。
• Cookie：适用于需要与服务器交互的数据。

选择哪种存储方式取决于具体需求和数据的生命周期。