Webextkits Docs

Appearance

useStorageLocal ​

如何使用 ​

定义完 schema 之后，在所有可以调用 chrome.storage.local API 的文件中，都可以通过以下方式使用

typescript
import { schema, SchemaType } from "@/schema/index";

//  使用 useStorageLocal 这个 hook
const { updateBucket, setBucket, getBucket, deleteBucket } =
  //  必须传入 schema 和 SchemaType 这个泛型，这样才会有代码提示
  useStorageLocal<SchemaType>(schema);

//  更新 user 这个 storage 的数据
updateBucket("user", (bucket) => {
  bucket.name = name;
  return bucket;
});
import { schema, SchemaType } from "@/schema/index";

//  使用 useStorageLocal 这个 hook
const { updateBucket, setBucket, getBucket, deleteBucket } =
  //  必须传入 schema 和 SchemaType 这个泛型，这样才会有代码提示
  useStorageLocal<SchemaType>(schema);

//  更新 user 这个 storage 的数据
updateBucket("user", (bucket) => {
  bucket.name = name;
  return bucket;
});

数据竞争问题 ​

useStorageLocal 内部使用 navigator.locks 来避免数据竞争，已经内置实现，不需要额外处理

updateBucket ​

更新某个 schema 的数据

typescript
import { schema, SchemaType } from "@/schema/index";

const { updateBucket } = useStorageLocal<SchemaType>(schema);

//  接受两个参数
//  1. schema 的 key
//  2. bucket 的回调
await updateBucket("user", (bucket) => {
  bucket.name = name;

  //  更新完 bucket 之后需要将新的 bucket 返回，以此达到更新
  return bucket;
});
import { schema, SchemaType } from "@/schema/index";

const { updateBucket } = useStorageLocal<SchemaType>(schema);

//  接受两个参数
//  1. schema 的 key
//  2. bucket 的回调
await updateBucket("user", (bucket) => {
  bucket.name = name;

  //  更新完 bucket 之后需要将新的 bucket 返回，以此达到更新
  return bucket;
});

setBucket ​

直接设置整个 schema 的数据

typescript
import { schema, SchemaType } from "@/schema/index";

const { setBucket } = useStorageLocal<SchemaType>(schema);

//  接受两个参数
//  1. schema 的 key
//  2. schema 数据
await setBucket("user", {
  name: "张三",
  age: 12,
});
import { schema, SchemaType } from "@/schema/index";

const { setBucket } = useStorageLocal<SchemaType>(schema);

//  接受两个参数
//  1. schema 的 key
//  2. schema 数据
await setBucket("user", {
  name: "张三",
  age: 12,
});

getBucket ​

读取某个 schema 的数据

typescript
import { schema, SchemaType } from "@/schema/index";

const { getBucket } = useStorageLocal<SchemaType>(schema);

//  接受一个参数
//  1. schema 的 key
const user = await getBucket("user");
import { schema, SchemaType } from "@/schema/index";

const { getBucket } = useStorageLocal<SchemaType>(schema);

//  接受一个参数
//  1. schema 的 key
const user = await getBucket("user");

deleteBucket ​

删除某个 schema

typescript
import { schema, SchemaType } from "@/schema/index";

const { deleteBucket } = useStorageLocal<SchemaType>(schema);

//  接受一个参数
//  1. schema 的 key
await deleteBucket("user");
import { schema, SchemaType } from "@/schema/index";

const { deleteBucket } = useStorageLocal<SchemaType>(schema);

//  接受一个参数
//  1. schema 的 key
await deleteBucket("user");

Powered by Vitepress