本文原刊於 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中文網其他相關文章！
