@babichjacob/svelte-localstorage

Svelte writable stores that automatically synchronize with localStorage

Usage no npm install needed!

<script type="module">
  import babichjacobSvelteLocalstorage from 'https://cdn.skypack.dev/@babichjacob/svelte-localstorage';
</script>

README

🗄️ Svelte localStorage

This library for Svelte provides writable stores that automatically synchronize with localStorage.

💻 Installation

npm install --save-dev @babichjacob/svelte-localstorage

🧰 SvelteKit

Use the writable store creator from @babichjacob/svelte-localstorage/svelte-kit:

<script>
    import { localStorageStore } from "@babichjacob/svelte-localstorage/svelte-kit";
    const textInput = localStorageStore("text-input", "Initial value");
</script>

<input bind:value={$textInput} type="text">

🌱 Sapper

Use the writable store creator from @babichjacob/svelte-localstorage/sapper:

<script>
    import { localStorageStore } from "@babichjacob/svelte-localstorage/sapper";
    const textInput = localStorageStore("text-input", "Initial value");
</script>

<input bind:value={$textInput} type="text">

⚡️ Svelte without an SSR framework

Use the writable store creator from @babichjacob/svelte-localstorage/browser:

<script>
    import { localStorageStore } from "@babichjacob/svelte-localstorage/browser";
    const textInput = localStorageStore("text-input", "Initial value");
</script>

<input bind:value={$textInput} type="text">

⚡️ Custom SSR framework

The store creators described above are all built from the base store creator. You can use it with any SSR framework by providing the browser argument with the correct value:

<script>
    import { localStorageStore } from "@babichjacob/svelte-localstorage/base";
    import { isServer } from "@some-framework/metadata";

    const textInput = localStorageStore("text-input", "Initial value", !isServer);
</script>

<input bind:value={$textInput} type="text">

😵 Help! I have a question

Create an issue and I'll try to help.

😡 Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

📄 License

MIT

🙏 Attribution

Repository preview image generated with GitHub Social Preview

This README was generated with ❤️ by readme-md-generator