Vue3 + TypeScript 本地存储 localStorage 的用法

1、字符串

直接操作

// 存储表格列宽
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

  // 定义表格列宽对象interface ITableColumnWidth {// 列标识符[key: string]: number;}// 表格列宽对象const tableColumnWidth = ref<ITableColumnWidth>({});// 表格列宽 keyconst 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

// 本地存储的申领用途
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();}
};