IDB Keyval

Wrapper for

idb-keyval
.

⚡️ Prerequisites

npm install --save idb-keyval
npm install --save idb-keyval
sh

Usage

<script>
    import { idb } from "@sveu/extend/idbKeyval"

    const dark_mode = idb("dark_mode", false)

</script>

<button on:click="{() => $dark_mode = !$dark_mode}">
    Toggle dark mode
</button>
<script>
    import { idb } from "@sveu/extend/idbKeyval"

    const dark_mode = idb("dark_mode", false)

</script>

<button on:click="{() => $dark_mode = !$dark_mode}">
    Toggle dark mode
</button>
svelte

Example

Is Dark mode: false

<script>
    import { idb } from "@sveu/extend/idbKeyval" 

    import { browser } from "@sveu/shared"

    const dark = idb("dark", false) 
    
    function theme_toggle() {
        if(browser){

            if($dark) document.documentElement.classList.add("dark")
            else document.documentElement.classList.remove("dark")
        }
    }

    $: $dark, theme_toggle()
</script>

<h1>Is Dark mode: {$dark}</h1>

<button on:click="{() => $dark = !$dark}">
    Toggle dark mode
</button>
<script>
    import { idb } from "@sveu/extend/idbKeyval" 

    import { browser } from "@sveu/shared"

    const dark = idb("dark", false) 
    
    function theme_toggle() {
        if(browser){

            if($dark) document.documentElement.classList.add("dark")
            else document.documentElement.classList.remove("dark")
        }
    }

    $: $dark, theme_toggle()
</script>

<h1>Is Dark mode: {$dark}</h1>

<button on:click="{() => $dark = !$dark}">
    Toggle dark mode
</button>
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 value under. string Yes
value The value to store. If store have already been initialized, this value will be ignored. any No


Options

Name Description Type Default
onError The function to call when an error occurs. (error: unknown) => void console.error
Last update at: Invalid Date