sessionStorage工具类

// src/utils/sessionStorageUtil.js

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

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

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

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

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

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

export default sessionStorageUtil;

说明：

1. setItem：用于将数据存储到 sessionStorage 中，支持任意数据类型。如果是对象或数组，会自动转换为 JSON 格式存储。
2. getItem：从 sessionStorage 中读取数据，并解析为原始对象或数组（如果存储时为 JSON 格式）。
3. removeItem：删除 sessionStorage 中的指定键值对。
4. clear：清空所有 sessionStorage 中的数据。
5. hasKey：检查某个键是否存在于 sessionStorage 中。
6. getAllKeys：获取 sessionStorage 中所有存储的键名。

在 Vue 中使用

你可以在 Vue 组件或其他服务中轻松导入并使用该工具类：

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

export default {
  name: 'ExampleComponent',
  mounted() {
    // 设置sessionStorage
    sessionStorageUtil.setItem('user', { name: 'Alice', age: 25 });

    // 获取sessionStorage数据
    const user = sessionStorageUtil.getItem('user');
    console.log(user); // 输出：{ name: 'Alice', age: 25 }

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

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

    // 清空sessionStorage
    sessionStorageUtil.clear();
  }
};