WXT Storage

With WXT

This module is built-in to WXT, so you don't need to install anything. But must enable storage permissions

import { storage } from '#imports';

wxt.config.ts

export default defineConfig({
  manifest: {
    permissions: ['storage'],
  },
});

Usage

All storage keys must be prefixed by their storage area: local:, session:, sync:, or managed:.

await storage.getItem<number>('local:installDate');
await storage.watch<number>(
  'local:installDate',
  (newInstallDate, oldInstallDate) => {
    // ...
  },
);
await storage.getMeta<{ v: number }>('local:installDate');

Define Storage Items

• Define an items type, default value, and more in a single place

• Use that helper function instead of storage.

// utils/storage.ts

const showChangelogOnUpdate = storage.defineItem<boolean>(
  'local:showChangelogOnUpdate',
  {
    fallback: true,
  },
);
await showChangelogOnUpdate.getValue();
await showChangelogOnUpdate.setValue(false);
await showChangelogOnUpdate.removeValue();
const unwatch = showChangelogOnUpdate.watch((newValue) => {
  // ...
});