localStorage工具类

// src/utils/localStorageUtil.js

/**
 * localStorage工具类封装
 * 提供对localStorage的通用操作，包括存储、读取、删除和清空数据。
 */
const localStorageUtil = {
  /**
   * 设置localStorage中的键值对
   * 支持存储对象，内部会将对象转换为JSON字符串进行存储
   * 
   * @param {string} key - 存储的键名
   * @param {*} value - 存储的值，可以是任何类型
   */
  setItem(key, value) {
    try {
      // 将value转化为JSON字符串进行存储
      const jsonValue = JSON.stringify(value);
      localStorage.setItem(key, jsonValue);
    } catch (error) {
      console.error(`设置localStorage时发生错误: ${error}`);
    }
  },

  /**
   * 从localStorage中获取数据
   * 如果数据是JSON格式，会将其解析为对象或数组返回
   * 
   * @param {string} key - 要获取的键名
   * @returns {*} - 返回存储的值，如果键不存在则返回null
   */
  getItem(key) {
    try {
      // 从localStorage中获取数据
      const item = localStorage.getItem(key);
      // 如果存储的是JSON格式，将其解析为对象/数组
      return item ? JSON.parse(item) : null;
    } catch (error) {
      console.error(`读取localStorage时发生错误: ${error}`);
      return null;
    }
  },

  /**
   * 从localStorage中删除指定的键值对
   * 
   * @param {string} key - 要删除的键名
   */
  removeItem(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error(`删除localStorage中的键时发生错误: ${error}`);
    }
  },

  /**
   * 清空localStorage中的所有数据
   */
  clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error(`清空localStorage时发生错误: ${error}`);
    }
  },

  /**
   * 检查localStorage中是否存在指定的键
   * 
   * @param {string} key - 要检查的键名
   * @returns {boolean} - 如果键存在则返回true，否则返回false
   */
  hasKey(key) {
    return localStorage.getItem(key) !== null;
  },

  /**
   * 获取localStorage中存储的所有键名
   * 
   * @returns {Array<string>} - 返回包含所有键名的数组
   */
  getAllKeys() {
    try {
      const keys = [];
      for (let i = 0; i < localStorage.length; i++) {
        keys.push(localStorage.key(i));
      }
      return keys;
    } catch (error) {
      console.error(`获取localStorage键名时发生错误: ${error}`);
      return [];
    }
  },
};

export default localStorageUtil;

说明：

1. setItem：用于将数据存储到 localStorage 中。它支持任意数据类型，若数据为对象或数组，会自动转换为 JSON 字符串存储。
2. getItem：从 localStorage 中读取数据，并会尝试将 JSON 格式的数据解析为对象或数组返回。
3. removeItem：删除指定键的数据。
4. clear：清空 localStorage 中的所有数据。
5. hasKey：检查某个键是否存在于 localStorage 中。
6. getAllKeys：获取 localStorage 中存储的所有键名。

在 Vue 中使用

你可以在 Vue 项目中的任何组件或服务中导入并使用这个工具类：

// 示例：在 Vue 组件中使用
import localStorageUtil from '@/utils/localStorageUtil';

export default {
  name: 'ExampleComponent',
  mounted() {
    // 设置localStorage
    localStorageUtil.setItem('user', { name: 'John', age: 30 });

    // 获取localStorage数据
    const user = localStorageUtil.getItem('user');
    console.log(user); // 输出：{ name: 'John', age: 30 }

    // 检查是否存在某个键
    const hasUser = localStorageUtil.hasKey('user');
    console.log(hasUser); // 输出：true

    // 删除数据
    localStorageUtil.removeItem('user');

    // 清空localStorage
    localStorageUtil.clear();
  }
};