🚀 Svelte 快速提示：将商店连接到本地存储

本地存储，我的天哪🤩

创建商店

使用您的商店

就是这样！

本地存储，我的天哪🤩

今天为您提供一个非常简单的提示；如何使用 Svelte 存储使数据与本地存储保持同步。

如果您想要保留某些用户值（例如 UI 配置，他们喜欢的主题、显示/隐藏的内容等），并将设置保留以供将来的会话使用，这将特别有用。

使用 Svelte 来实现这一点非常简单，让我们来检查一下👇

创建商店

要连接到本地存储，我们需要做的就是创建一个writable存储，然后根据本地存储设置一个默认值，并在任何更改（通过subscribe）时更新本地存储条目。

// src/stores/content.js
import { writable } from 'svelte/store'

// Get the value out of storage on load.
const stored = localStorage.content
// or localStorage.getItem('content')

// Set the stored value or a sane default.
export const content = writable(stored || 'Hello, World!')

// Anytime the store changes, update the local storage value.
content.subscribe((value) => localStorage.content = value)
// or localStorage.setItem('content', value)

这里要记住的关键是本地存储始终存储字符串，因此如果您存储其他内容，例如某个booleanJSON，那么您将需要将其转换为/从您想要的数据类型和本地存储字符串表示形式。

例如，如果您想存储布尔值，它看起来更像这样：

// src/stores/enabled.ts
import { writable } from 'svelte/store'

export const enabled = writable<boolean>(localStorage.enabled === 'true')

enabled.subscribe((value) => localStorage.enabled = String(value))

请注意，我们读取该值并将其与字符串进行比较，'true'而不是将其视为boolean，这是行不通的。另请注意，我们需要将其转换为字符串，然后才能将其保存到本地存储（尤其是在使用 Typescript 的情况下）。

如果您正在使用对象或数组，则可以倾向于使用JSON.parse：

// src/stores/user.ts
import { writable } from 'svelte/store'

interface User {
  email: string
  username: string
}

export const enabled = writable<User>(JSON.parse(localStorage.getItem('user')))

enabled.subscribe((value) => localStorage.user = JSON.stringify(value))

我们不会想使用getItem而不是属性访问器，因为getItem返回null其中属性访问器undefined在缺少键时返回并且null对 有效，JSON.parse而undefined导致它因 而剧烈爆炸Uncaught SyntaxError: Unexpected token u in JSON at position 0。

使用您的商店

现在您可以在组件中使用该值：

<script>
  import { content } from "./store"
</script>

<p>{$content}</p>

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

每次更新值时，本地存储都会更新；重新加载时，它将自动设置为上次设置的值。真是简洁！

就是这样！

我告诉过你这会很快😎

希望这对你有用，加油！🍻

编辑：感谢Twitter 上的 Luke Edwards (@lukeed05)指出你可以使用localStorage['content'](或localStorage.content) 而不是更冗长的localStorage.getItem('content')和localStorage.content = '...'而不是localStorage.setItem('content', '...')

编辑 2：感谢Twitter 上的 Jamie Birch (@LinguaBrowse)，他提到坚持使用getItem和可能更安全setItem，因为它们在本地存储规范中明确声明了。使用属性访问器似乎足够安全，但如果您想更加安全，请使用getItem和setItem。

修改 3：Sören (@the_soerenson) 在 Twitter 上指出，你可以进一步添加事件监听器，这样就能检测到其他浏览器标签页/窗口中的本地存储变化。如果你想跨浏览器标签页同步离线数据，这个功能或许会很实用？

编辑 4：感谢Twitter 上的 @JuSellier提醒我，我们可以JSON.parse在原始值（例如 ）上boolean使用number，所以我更新了示例，改为使用 。谢谢 JuSellier！

感谢阅读！不妨点赞 ❤️、🦄 或 🔖，收藏这篇文章，以后再分享。💕

还有其他技巧、想法、反馈或更正吗？请在评论区告诉我！ 🙋‍♂️

不要忘记在 Dev.to ( danawoodman )、Twitter ( @danawoodman ) 和/或 Github ( danawoodman ) 上关注我！

Joshua Aragon在Unsplash上拍摄的照片