Skip to content
ultrastorageultrastorage
Esc
↑↓navigate↵open⌘Jpreview
On this page

Browser storage, ultra-enhanced

Store rich values, expire stale data, validate reads, subscribe to changes, and use it from React through a familiar Storage API.

Compare with localStorage

Objects

JSON.stringify({ name: "Ada" })Serialize the user before saving it
setItem("user", { name: "Ada" })Store and read the user as an object

Expiration

setItem("otp", "4821")Remove the OTP yourself after five minutes
setItem("otp", 4821, { ttl: 3e5 })Expire the OTP automatically after five minutes

Validation

User.parse(JSON.parse(storedUser))Parse and validate the saved user
getItem("user", { schema: User })Validate the saved user while reading it

Subscriptions

event.key === "cart" && syncCart()Listen to every storage event and filter for cart
subscribe("cart", syncCart)React only when the cart changes

Create a storage instance

Create one shared instance, then read and write real JavaScript values without manual serialization. Add expiration and subscriptions only where you need them.

import { createStorage } from 'ultrastorage';

const storage = createStorage({ prefix: 'editor' });

storage.setItem(
  'draft:post-42',
  {
    title: 'Introducing ultrastorage',
    updatedAt: new Date(),
    tags: new Set(['release', 'docs']),
  },
  { ttl: 86_400_000 },
);

storage.subscribe('draft:post-42', refreshPreview);

Features

Was this page helpful?