vue3存储/获取本地或会话存储，封装存储工具，结合pina使用存储

[一、基本用法（原生 API）](#一、基本用法（原生 API）)

[1. 存储数据](#1. 存储数据)

[2. 获取数据](#2. 获取数据)

[3. 删除数据](#3. 删除数据)

[二、Vue3 中封装成工具函数（推荐）](#二、Vue3 中封装成工具函数（推荐）)

[三、以上工具函数在 Vue3 组件中使用](#三、以上工具函数在 Vue3 组件中使用)

[1. 在选项式 API 中使用](#1. 在选项式 API 中使用)

[2. 在组合式 API（setup 语法糖）中使用](#2. 在组合式 API（setup 语法糖）中使用)

[四、将存储结合 Pinia 实现响应式存储（高级用法）](#四、将存储结合 Pinia 实现响应式存储（高级用法）)

[1. 在组件中使用](#1. 在组件中使用)

五、注意事项

一、基本用法（原生 API）

本地存储和会话存储的核心 API 完全一致，区别在于：

localStorage：数据持久化存储，关闭浏览器后不会丢失（除非手动清除）
sessionStorage：数据仅在当前会话有效，关闭标签页 / 浏览器后自动清除

1. 存储数据

javascript 复制代码

// 存储到本地存储
localStorage.setItem('userName', '张三'); // 存储字符串
localStorage.setItem('userInfo', JSON.stringify({ id: 1, name: '张三' })); // 存储对象（需序列化）

// 存储到会话存储
sessionStorage.setItem('token', 'abc123');
sessionStorage.setItem('cart', JSON.stringify([{ id: 1, name: '商品' }]));

2. 获取数据

javascript 复制代码

// 从本地存储获取
const userName = localStorage.getItem('userName'); // 获取字符串
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}'); // 获取对象（需反序列化）

// 从会话存储获取
const token = sessionStorage.getItem('token');
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');

3. 删除数据

javascript 复制代码

// 删除单个数据
localStorage.removeItem('userName');
sessionStorage.removeItem('token');

// 清空所有数据
localStorage.clear();    //清空本地存储
sessionStorage.clear();    //清空会话存储

二、Vue3 中封装成工具函数（推荐）

为了更方便使用，可以将以上这些方法封装成工具函数，放在 utils/storage.js 中，封装如下：

javascript 复制代码

// 本地存储工具函数
export const LocalStorage = {
  // 设置数据
  set(key, value) {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },

  // 获取数据
  get(key) {
    const value = localStorage.getItem(key);
    if (!value) return null;
    
    // 尝试解析为对象
    try {
      return JSON.parse(value);
    } catch (e) {
      return value; // 解析失败则返回原始字符串
    }
  },

  // 删除数据
  remove(key) {
    localStorage.removeItem(key);
  },

  // 清空所有数据
  clear() {
    localStorage.clear();
  }
};

// 会话存储工具函数
export const SessionStorage = {
  set(key, value) {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    sessionStorage.setItem(key, value);
  },

  get(key) {
    const value = sessionStorage.getItem(key);
    if (!value) return null;
    
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  },

  remove(key) {
    sessionStorage.removeItem(key);
  },

  clear() {
    sessionStorage.clear();
  }
};

三、以上工具函数在 Vue3 组件中使用

1. 在选项式 API 中使用

javascript 复制代码

<template>
  <div>
    <p>用户名：{{ userName }}</p>
    <button @click="saveUser">保存用户信息</button>
  </div>
</template>

<script>
import { LocalStorage } from '@/utils/storage';

export default {
  data() {
    return {
      userName: ''
    };
  },
  mounted() {
    // 组件挂载时获取本地存储的数据
    this.userName = LocalStorage.get('userName') || '未登录';
  },
  methods: {
    saveUser() {
      // 保存数据到本地存储
      LocalStorage.set('userName', '张三');
      LocalStorage.set('userInfo', { id: 1, age: 20 });
      this.userName = '张三';
    }
  }
};
</script>

2. 在组合式 API（setup 语法糖）中使用

javascript 复制代码

<template>
  <div>
    <p>Token：{{ token }}</p>
    <button @click="saveToken">保存Token</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { SessionStorage } from '@/utils/storage';

// 响应式变量
const token = ref('');

// 组件挂载时获取会话存储的数据
onMounted(() => {
  token.value = SessionStorage.get('token') || '无';
});

// 保存数据到会话存储
const saveToken = () => {
  SessionStorage.set('token', 'abc123456');
  token.value = 'abc123456';
};
</script>

四、将存储结合 Pinia 实现响应式存储（高级用法）

如果需要让存储的数据在组件中保持响应式（数据变化时自动更新视图），可以结合 Pinia 状态管理，如下：

javascript 复制代码

import { defineStore } from 'pinia';
import { LocalStorage } from '@/utils/storage';

export const useStorageStore = defineStore('storage', {
  state: () => ({
    // 从本地存储初始化数据（响应式）
    userInfo: LocalStorage.get('userInfo') || {},
    theme: LocalStorage.get('theme') || 'light'
  }),

  actions: {
    // 更新用户信息并同步到本地存储
    setUserInfo(info) {
      this.userInfo = info;
      LocalStorage.set('userInfo', info); // 同步到本地存储
    },

    // 更新主题并同步到本地存储
    setTheme(theme) {
      this.theme = theme;
      LocalStorage.set('theme', theme);
    }
  }
});

1. 在组件中使用

javascript 复制代码

<template>
  <div>
    <p>用户名称：{{ storageStore.userInfo.name }}</p>
    <button @click="updateUser">更新用户信息</button>
  </div>
</template>

<script setup>
import { useStorageStore } from '@/stores/storage';

const storageStore = useStorageStore();

const updateUser = () => {
  storageStore.setUserInfo({ id: 1, name: '李四', age: 25 });
};
</script>

五、注意事项

存储容量限制：localStorage 和 sessionStorage 通常有 5MB 左右的容量限制，不适合存储大量数据

数据类型限制 ：只能存储字符串，对象 / 数组需要通过 JSON.stringify() 序列化

安全性：存储在本地的信息容易被篡改，敏感数据（如密码）不应直接存储

跨域限制：不同域名之间不能共享 localStorage/sessionStorage 数据

响应式问题：直接修改 localStorage 不会触发 Vue 组件更新，需手动刷新或结合 Pinia 实现响应式

根据需求选择合适的存储方式：需要持久化的数据用 localStorage，临时会话数据用 sessionStorage。