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();
  }
};
相关推荐
mldong26 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字30 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.1 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木1 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序