chrome extension开发框架WXT之WXT Storage api解析【补充说明一】

defineItem 方法里,fallbackinitversionmigrations 这些参数能够让你对存储项进行更为细致的设置,像设定默认值、初始化值、版本控制以及数据迁移等操作。下面详细说明这些参数的使用方法:

fallback 参数

fallback 参数为 getValue 方法在未找到存储值时提供默认值。

示例代码
typescript 复制代码
import { storage, type WxtStorage } from './your-storage-module';

// 定义一个存储项,设置 fallback 参数
const counterItem = storage.defineItem<number>("local:counter", {
  fallback: 0
});

// 获取存储项的值
counterItem.getValue().then(value => {
  console.log("Counter value:", value); // 如果没有存储值,会输出 0
});

init 参数

init 参数接收一个函数,该函数会在定义存储项且值不存在时立即执行,其返回值会被保存到存储中。

示例代码
typescript 复制代码
import { storage, type WxtStorage } from './your-storage-module';

// 定义一个存储项,设置 init 参数
const installDateItem = storage.defineItem<number>("local:installDate", {
  init: () => Date.now()
});

// 获取存储项的值
installDateItem.getValue().then(value => {
  console.log("Install date:", new Date(value)); // 如果没有存储值,会保存当前时间
});

version 参数

version 参数用来为存储项指定版本号,以此开启数据迁移功能。当未来版本号发生改变时,迁移函数会在应用启动时运行。

migrations 参数

migrations 参数是一个对象,它将版本号映射到迁移函数。当存储项的版本号变更时,这些迁移函数会被调用,用于更新存储的数据。

示例代码
typescript 复制代码
import { storage, type WxtStorage } from './your-storage-module';

// 定义一个存储项,设置 version 和 migrations 参数
const userSettingsItem = storage.defineItem<{ theme: string; fontSize: number }>("local:userSettings", {
  fallback: { theme: "light", fontSize: 16 },
  version: 2,
  migrations: {
    1: (oldValue) => {
      // 从版本 1 迁移到版本 2 的逻辑
      return {
        ...oldValue,
        fontSize: oldValue.fontSize || 16 // 如果 fontSize 不存在,设置默认值
      };
    },
    2: (oldValue) => {
      // 从版本 2 迁移到版本 3 的逻辑(这里假设后续可能有版本 3)
      return oldValue;
    }
  }
});

// 手动调用迁移函数(通常在扩展更新时自动调用)
userSettingsItem.migrate().then(() => {
  console.log("Migration completed");
  userSettingsItem.getValue().then(value => {
    console.log("User settings:", value);
  });
});

综合使用示例

typescript 复制代码
import { storage, type WxtStorage } from './your-storage-module';

// 定义一个存储项,综合使用各个参数
const userDataItem = storage.defineItem<{ name: string; age: number }>("local:userData", {
  fallback: { name: "Guest", age: 0 },
  init: () => ({ name: "New User", age: 18 }),
  version: 2,
  migrations: {
    1: (oldValue) => {
      // 从版本 1 迁移到版本 2 的逻辑
      return {
        ...oldValue,
        age: oldValue.age || 0 // 如果 age 不存在,设置默认值
      };
    }
  }
});

// 获取存储项的值
userDataItem.getValue().then(value => {
  console.log("User data:", value);
});

// 手动调用迁移函数(通常在扩展更新时自动调用)
userDataItem.migrate().then(() => {
  console.log("Migration completed");
});

通过上述示例,你可以看到如何利用 fallbackinitversionmigrations 参数来定义具有默认值、初始化逻辑、版本控制和数据迁移功能的存储项。

相关推荐
Larcher5 小时前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践
javascript·后端
Larcher5 小时前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top P
javascript·后端
用户938515635077 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep8 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端8 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
eric-sjq8 小时前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)
javascript·机器学习·自然语言处理·html
浮生望8 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
To_OC9 小时前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定
javascript·算法·leetcode
90后的晨仔9 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔9 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端