web-dev-qa-db-ja.com

Svelte Storeを永続化する方法

ページが更新されてもデータが利用できるように、svelteストアデータを永続化する直接オプションはありますか？.

値をリアクティブにするため、ローカルストレージを使用していません。

sveltesvelte-store
10
Anil Sivadas

これもチェックしたいかもしれません https://github.com/andsala/svelte-persistent-store

また、sapperを使用していてサーバーで何かを実行したくない場合は、onMountフックを使用できます。

onMount(() => {
  console.log('I only run in the browser');
});
1
Dmitry Boychev

https://higsch.me/2019/06/22/2019-06-21-svelte-local-storage/ by Matthias Stahlの提案：

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// App.svelte
import { count } from 'store.js';

ストアを永続化するには、useLocalStorageオブジェクトに関数storeを含めるだけです。

// store.js
import { writable } from 'svelte/store';

const createWritableStore = (key, startValue) => {
  const { subscribe, set } = writable(startValue);

  return {
    subscribe,
    set,
    useLocalStorage: () => {
      const json = localStorage.getItem(key);
      if (json) {
        set(JSON.parse(json));
      }

      subscribe(current => {
        localStorage.setItem(key, JSON.stringify(current));
      });
    }
  };
}

export const count = createWritableStore('count', 0);

// App.svelte
import { count } from 'store.js';

count.useLocalStorage();

次に、App.svelte永続的な状態を有効にするには、useLocalStorage関数を呼び出すだけです。

0
mic