Storage

Reactively stores data in the browser's storage.

Usage

<script>
    import { storage } from "@sveu/browser"

    const state = storage("svelte-u is", "awesome")
</script>
<script>
    import { storage } from "@sveu/browser"

    const state = storage("svelte-u is", "awesome")
</script>
svelte

Example

<script>
    import { storage } from "@sveu/browser"

    const state = storage("svelte-u", "awesome")
</script>

<div class="flex flex-col space-y-5 mt-20 items-center">

    <div>
        <label for="sveu">Svelte-U is:</label>

        <input
            type="text"
            id="sveu"
            bind:value="{$state}"
             />
    </div>
    <button
        class="w-1/4"
        on:click="{() => ($state = null)}"
        >remove
    </button>
</div>
<script>
    import { storage } from "@sveu/browser"

    const state = storage("svelte-u", "awesome")
</script>

<div class="flex flex-col space-y-5 mt-20 items-center">

    <div>
        <label for="sveu">Svelte-U is:</label>

        <input
            type="text"
            id="sveu"
            bind:value="{$state}"
             />
    </div>
    <button
        class="w-1/4"
        on:click="{() => ($state = null)}"
        >remove
    </button>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Click fold/expand code

API

Arguments

Name Description Type Required
key The key to store the data under string Yes
fallback The fallback value T No


Options

Name Description Type Default
store The store to use (local, session, cookie, url local
sync Whether to sync the data boolean true
onError The function to call on error (error: Error) => void console.error
serializer The serializer to use StorageSerializer<T> depends on fallback


TIP
  1. sync is only available for local.
  2. serializer is only available for local, session, and cookie. If your using url, you can't customize the serializer b/c it's use
    urlQuery
     under the hood.
Last update at: Invalid Date