使用 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中文網其他相關文章！