Skip to main content

Automatic localStorage persistency

SSR not supported!

The localStorage adapter currently does not support server-side rendered applications and will throw an exception if executed on the server.

Install the @superstate/adapters package:

npm install @superstate/adapters

And plug the ls adapter into your superstate:

import { superstate } from '@superstate/core'
import { ls } from '@superstate/adapters'

const count = superstate(0).use([
  ls('count'), // 'count' is the localStorage key
])

Now, whenever now changes, its value will be persisted against the localStorage:

count.set(5)

console.log(localStorage.getItem('count')) // logs 5
Limitation

Currently, only data serializeable by JSON.stringify() are supported.

Initial value

When ls is plugged into your state, its initial value will be whatever is stored in the localStorage under the key you specified. For example:

localStorage.setItem('count', 5)

const count = superstate(0).use([
  ls('count'), // 'count' is the key
])

console.log(count.now()) // logs 5

Persisting drafts

If you'd like to persist your drafts alongside the published (now) value of your state, you can do so by passing true to the draft option of ls:

const count = superstate(0).use([ls('count', { draft: true })])

This way, every time your draft changes, it'll be persisted against the localStorage as well.

info

The key of drafts on localStorage are preffixed by __draft. If your key is count, then the draft version of it on localStorage would be count__draft