如何使用单一函数实现localStorage存储，避免创建多个存储函数？

核心思路 #

直接封装通用的增删改查方法，通过不同的存储key区分不同数据对象，不用为每种数据结构单独创建存储函数，从根源避免覆盖问题。

优化后的工具封装（localStorage.js） #

// 可选：统一管理所有存储key，避免键名重复导致覆盖
const STORAGE_KEYS = {
  TASK_RELATED: 'localStorageData',
  CUSTOM_DATA: 'localStorageDataTwo',
  // 后续新增存储直接在这里加key即可，不用写新函数
}

/**
 * 通用存储localStorage方法
 * @param {string} key 存储的键名，建议从STORAGE_KEYS取
 * @param {any} data 要存储的任意类型数据
 */
function saveLocalStorage(key, data) {
  const stringifyData = JSON.stringify(data)
  window.localStorage.setItem(key, stringifyData)
}

/**
 * 通用读取localStorage方法
 * @param {string} key 存储的键名
 * @returns {any} 解析后的存储数据
 */
function getLocalStorage(key) {
  const rawData = window.localStorage.getItem(key)
  try {
    return rawData ? JSON.parse(rawData) : null
  } catch (e) {
    console.error('localStorage数据解析失败', e)
    return rawData
  }
}

/**
 * 通用删除localStorage方法
 * @param {string} key 要删除的存储键名
 */
function removeLocalStorage(key) {
  window.localStorage.removeItem(key)
}

export { STORAGE_KEYS, saveLocalStorage, getLocalStorage, removeLocalStorage }

使用示例 #

import { STORAGE_KEYS, saveLocalStorage, getLocalStorage } from "../../support/localStorage";

// 存第一种数据：任务相关数据
saveLocalStorage(STORAGE_KEYS.TASK_RELATED, { autoId, quoteId, taskId })
// 读取第一种数据
const taskData = getLocalStorage(STORAGE_KEYS.TASK_RELATED)

// 存第二种自定义数据
const customData = "Some Data 260-255"
saveLocalStorage(STORAGE_KEYS.CUSTOM_DATA, { data: customData })
// 读取第二种数据
const savedCustomData = getLocalStorage(STORAGE_KEYS.CUSTOM_DATA)

方案优势 #

• 不用为新增的存储类型创建新的存储函数，新增存储只需要在STORAGE_KEYS里加一个新的key即可，扩展性极强
• 所有key统一管理，不会出现拼写错误导致的数据覆盖问题
• 自带序列化、反序列化逻辑，不用在业务代码里重复写JSON.stringify/JSON.parse
• 支持任意格式的数据存储，没有结构限制

原存储逻辑问题说明 #

你之前的方案本质是为每种数据结构单独维护变量、单独写存储逻辑，当存储类型变多之后会产生大量重复代码，维护成本很高，也容易出现手误写错key导致覆盖的问题，用上述通用封装可以完全规避这类问题。

内容的提问来源于stack exchange，提问作者soccerway