使用 Stimulus 将 UI 状态存储在 localStorage 中

本文最初发表于 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中文网其他相关文章！