Webextkits Docs

Appearance

useStorageLocal ​

如何使用 ​

在我们定义完 schema 之后，在所有可以执行 chrome.storage.lcoal 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. shcema 的 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. shcema 的 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. shcema 的 key
//  2. schema 数据
await setBucket("user", {
  name: "张三",
  age: 12,
});
import { schema, SchemaType } from "@/schema/index";

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

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

getBucket ​

获取某个 schema 的数据

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

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

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

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

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

deleteBucket ​

删除某个 schema

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

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

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

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

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

Powered by Vitepress