A simple custom rune in Svelte 5 that syncs with browser storage.
npm install svelte-persist-runeA custom rune in Svelte 5 that syncs with browser storage. Based on svelte-persisted-store
``bash`
npm i svelte-persist-rune
`bash`
pnpm add svelte-persist-rune
`bash`
yarn add svelte-persist-rune
In component
`html
{rune.value}
Global state
typescript
// use $effect.root
const rune = persist(createLocalStorage('test', 0), true)
`With sync tabs
html
{rune.value}
`Custom storage
#### This is just examples and they are not tested!!
Cookie storage
typescript
import Cookies from 'js-cookie'
import { noop, type PersistStorage } from 'svelte-persist-rune'export function createCookieStorage(
key: string,
initialValue: T,
options?: Cookies.CookieAttributes,
): PersistStorage {
if (typeof document === 'undefined') {
return noop(initialValue)
}
const get = () => {
const value = Cookies.get(key)
return value ? JSON.parse(value) : initialValue
}
return {
set: (value: T) => {
Cookies.set(key, JSON.stringify(value), options)
},
initialValue: get(),
defaultValue: initialValue,
}
}
`idb-keyval storage
typescript
// idb-storage.ts
import { get as idbGet, set as idbSet } from 'idb-keyval'
import { noop, type PersistStorage } from 'svelte-persist-rune'export async function createIdbStorage(
key: string,
initialValue: T,
): Promise> {
if (typeof window === 'undefined') {
return noop(initialValue)
}
return {
set: (value: T) => {
idbSet(key, value)
},
initialValue: (await idbGet(key)) ?? initialValue,
defaultValue: initialValue,
}
}
// +page.ts
import { createIdbStorage } from './idb-storage'
export async function load() {
return await createIdbStorage('key', 10)
}
``MIT