Vue3 + TypeScript 本地存储 localStorage 的用法

1、字符串

直接操作

TypeScript 复制代码

// 存储表格列宽
localStorage.setItem(`${tableName.value}_${prop}_colWidth`, newWidth.toString());

// 获取表格列宽
let storageColWidth = localStorage.getItem(`${tableName.value}_${prop}_colWidth`);

// 删除本地存储的列宽数据
localStorage.removeItem(`${tableName.value}_${prop}_colWidth`);

2、对象

写：JSON.stringify

读：JSON.parse

TypeScript 复制代码

  // 定义表格列宽对象
  interface ITableColumnWidth {
    // 列标识符
    [key: string]: number;
  }
  // 表格列宽对象
  const tableColumnWidth = ref<ITableColumnWidth>({});
  // 表格列宽 key
  const tableColKey = computed(() => `${tableName.value}_colWidth`);

  // 存储表格列宽
  localStorage.setItem(tableColKey.value, JSON.stringify(tableColumnWidth.value));

  // 获取表格列宽
  const loadColumnWidthFormLocalStorage = () => {
    try {
      let value = localStorage.getItem(tableColKey.value);

      // 处理空值情况
      if (!value) {
        return;
      }

      // 安全解析并验证类型
      let parsed = JSON.parse(value);
      // 普通对象 {} 或 new Object() 创建的对象
      if (Object.prototype.toString.call(parsed) === "[object Object]") {
        tableColumnWidth.value = parsed;
      } else {
        console.warn("Invalid localStorage data format.");
      }
    } catch (e) {
      console.error("Error parsing localStorage data:", e);
    }
  };

  // 删除本地存储的列宽数据
  localStorage.removeItem(tableColKey.value);

3、数组

写：JSON.stringify

读：JSON.parse

TypeScript 复制代码

// 本地存储的申领用途
const localStoragePurposeSet = ref<Set<string>>(new Set());

// 保存申领用途到 localStorage
const savePurposeToLocalStorage = () => {
  // 创建新 Set 以触发响应式更新
  const newSet = new Set(localStoragePurposeSet.value);
  newSet.add(purposeVal.value.trim());

  // 更新响应式数据
  localStoragePurposeSet.value = newSet;

  // 存储到 localStorage，需转换为数组（Set 集合不能直接存储到 localStorage 中，需要转换为数组）
  const purposes = Array.from(newSet);
  localStorage.setItem("reagentApplyPurposes", JSON.stringify(purposes));
};

// 从 localStorage 中获取申领用途
const getPurposeFormLocalStorage = () => {
  try {
    const storedData = localStorage.getItem("reagentApplyPurposes");

    // 处理空值情况
    if (!storedData) {
      localStoragePurposeSet.value = new Set();
      return;
    }

    // 安全解析并验证类型
    const parsed: unknown = JSON.parse(storedData);
    if (Array.isArray(parsed) && parsed.every((item) => typeof item === "string")) {
      localStoragePurposeSet.value = new Set(parsed as string[]);
    } else {
      console.warn("Invalid localStorage data format. Resetting to empty Set.");
      localStoragePurposeSet.value = new Set();
    }
  } catch (e) {
    console.error("Error parsing localStorage data:", e);
    localStoragePurposeSet.value = new Set();
  }
};