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();
  }
};
相关推荐
姑苏洛言25 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen2 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手3 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin