本文最初发表于 Rails Designer
存储某些用户首选项或外观设置在 SaaS 应用程序中非常常见。例如字体大小、主题颜色或手风琴的打开/关闭状态。
（这个来自我的新 SaaS 的示例存储了导航部分的状态）
您可以将这些设置保存给用户，特别是当您需要在会话或不同浏览器之间恢复这些设置时。我为您介绍了这篇有关为 Rails 添加简单首选项的文章。但如果不需要保留这些设置，这是一个非常好的且简单的替代方案。
它涉及一个小型且可重用的JavaScript函数和浏览器的localStorage。让我们开始吧。
在此示例中，我将存储用户的主题（浅色或深色）。当深色时，深色类会添加到 html-element 中。然后，这可以用于定位其他元素（就像使用 Tailwind CSS 时使用 dark:bg-gray-950 一样）。
与 Stimulus 一样，我们首先编写 HTML。这将指导我们接下来要写什么：
<div data-controller="theme">
<!-- You can show/hide these buttons based on the .dark class -->
<button data-action="theme#update" data-theme-value-param="dark">
Lights Off
</button>
<button data-action="theme#update" data-theme-value-param="light">
Lights On
</button>
</div>
然后控制器：
// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
update({ params: { value } }) {
this.#setClass(value);
}
// private
#setClass(theme) {
document.documentElement.classList.toggle("dark", theme === "dark");
}
}
虽然表面上很简单，但这里有两件事需要注意：{ params: { value } }部分和toggle方法中的两个属性。
首先是 update 函数中的属性。它使用了一种叫做破坏的东西。听起来很困难，但事实并非如此，而且它是 JavaScript 的一个非常酷的功能。在继续之前让我们先检查一下。
默认情况下，事件会传递给包含参数的 get 函数。您以前可能见过这个。
get(event) {
log(event.params.value)
// => "light" or "dark"
}
但是如果您不需要 event 对象中的任何其他内容，则可以省略它，如下所示：
get({ params }) {
log(params.value)
// => "light" or "dark"
}
或者当你想使用破坏时，你可以这样做：
get({ params: { value } }) {
log(value)
// => "light" or "dark"
}
很酷，对吧？然后切换（“暗”，主题===“暗”）。第二个参数（theme ===“dark”）是一个布尔强制参数，它显式设置是否应该添加类（true）或删除类（false），而不是仅仅来回切换
？觉得这一切太难理解了吗？查看适用于 Rails 开发人员的 JavaScript。 ？
好的，太好了。使用上述控制器，您可以在明暗模式之间切换。也就是说，如果您这样连接了 CSS，但您注意到一旦屏幕刷新，默认屏幕就会恢复。所选主题未保留！
为此，我们引入 localStorage！它是一个 Web 存储 API，可让您在浏览器中存储键值对（字符串）。
让我们更新控制器以存储所选值（“暗”或“亮”）。
<div data-controller="theme">
<!-- You can show/hide these buttons based on the .dark class -->
<button data-action="theme#update" data-theme-value-param="dark">
Lights Off
</button>
<button data-action="theme#update" data-theme-value-param="light">
Lights On
</button>
</div>
然后在控制器连接后，读取值：
// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
update({ params: { value } }) {
this.#setClass(value);
}
// private
#setClass(theme) {
document.documentElement.classList.toggle("dark", theme === "dark");
}
}
这就是为用户存储一些设置是多么容易。请注意，这些值存储（未加密）在其浏览器中。因此，如果他们使用其他浏览器，则设置不存在。但在他们重新启动浏览器后它也会被存储（除非他们清除它）。
除了 setItem 和 getItem 之外，localStorage API 还提供了removeItem 和clear()。
以上是使用 Stimulus 将 UI 状态存储在 localStorage 中的详细内容。更多信息请关注PHP中文网其他相关文章！
