Question

是否有任何直接选项可以保留苗条的存储数据，以便即使刷新页面也可以使用数据。

我不使用本地存储，因为我希望这些值是反应性的。

Answer 1

摘自Matthias Stahl的https://github.com/higsch/higsch.me/blob/master/content/post/2019-06-21-svelte-local-storage.md：

假设我们有一个名为count的存储变量。

// 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函数以启用持久状态。

这在Routify中对我来说非常有效。对于Sapper，JHeth建议“将count.useLocalStorage()放置在消耗商店的组件中的onMount或if (process.browser)中。”

Answer 2

您可以手动创建商店的订阅，并将更改持久保存到localStorage，还可以将localStorage中的潜在值用作默认值。

示例

<script>
  import { writable } from "svelte/store";
  const store = writable(localStorage.getItem("store") || "");

  store.subscribe(val => localStorage.setItem("store", val));
</script>

<input bind:value={$store} />

Answer 3

您可能还想检查一下https://github.com/andsala/svelte-persistent-store

此外，如果您使用的是sapper，但又不想在服务器上运行某些东西，则可以使用onMount钩子

SELECT *
       FROM places
       WHERE :day = ANY (SELECT json_array_elements(open_days->'daysOfWeek')#>>'{}');

Answer 4

如果有人需要使用 JavaScript 对象进行此操作：

export const stored_object = writable(
    localStorage.stored_object? JSON.parse(localStorage.stored_object) : {});
stored_object.subscribe(val => localStorage.setItem("stored_object",JSON.stringify(val)));

好处是您可以使用 $ 简写访问可写对象，例如

<input type="text" bind:value={$stored_object.name}>
<input type="text" bind:value={$stored_object.price}>

Answer 5

TLDR：这里有一个函数，它不仅负责设置和获取，还负责删除。

function persistent(name) {
    const value = writable(localStorage.getItem(name));
    value.subscribe(val => [null, undefined].includes(val) ? localStorage.removeItem(name) : localStorage.setItem(name, val));
    return value;
}


export const my_token = persistent('token');

推理：与直觉相反，localStorage.setItem('someval', null) 不会为下一个 localStorage.getItem('someval') 设置 return null 而是 "null"，这可能不是人们想要的。因此，这也会检查 undefined 和 null 并相应地删除该项目。

Answer 6

此函数将 svelte 存储与 localStorage 同步。如果没有存储任何值，则取而代之的是 initValue 参数。

我还添加了 Typescript。

import { writable, Writable } from 'svelte/store';

const wStorage = <T>(key: string, initValue: T): Writable<T> => {
    const storedValueStr = localStorage.getItem(key);
    const storedValue: T | null = JSON.parse(storedValueStr);

    const store = writable(storedValue ?? initValue);
    store.subscribe((val) => {
        localStorage.setItem(key, JSON.stringify(val));
    })
    return store;
}

export default wStorage;

然后您可以在其他地方使用该函数，就像您习惯使用 writable 一样：

const count = wStorage('count', 0);

Answer 7

对于 svelte 3.38 和 svelte-kit（Sapper 的后继者），我使用：

<script>
  import { onMount } from 'svelte';
  import { writable } from "svelte/store";

  let value;

  onMount(() => {
    value = writable(localStorage.getItem("storedValue") || "defaut value");
    value.subscribe(val => localStorage.setItem("storedValue", val));
  })
</script>

<input bind:value={$value} />

localStorage 在 onMount()

之外不可用

如何保持苗条的商店

7 个答案: