本文原刊於 Rails Designer

儲(chǔ)存某些使用者首選項(xiàng)或外觀設(shè)定在 SaaS 應(yīng)用程式中非常常見。例如字體大小、主題顏色或手風(fēng)琴的開啟/關(guān)閉狀態(tài)。

（這個(gè)來(lái)自我的新 SaaS 的範(fàn)例儲(chǔ)存了導(dǎo)航部分的狀態(tài)）

您可以將這些設(shè)定儲(chǔ)存給用戶，特別是當(dāng)您需要在會(huì)話或不同瀏覽器之間恢復(fù)這些設(shè)定時(shí)。我為您介紹了這篇有關(guān)為 Rails 添加簡(jiǎn)單首選項(xiàng)的文章。但如果不需要保留這些設(shè)置，這是一個(gè)非常好的且簡(jiǎn)單的替代方案。

它涉及一個(gè)小型且可重複使用的JavaScript函數(shù)和瀏覽器的localStorage。讓我們開始吧。

在此範(fàn)例中，我將儲(chǔ)存使用者的主題（淺色或深色）。當(dāng)深色時(shí)，深色類別會(huì)加入到 html-element 中。然後，這可以用於定位其他元素（就像使用 Tailwind CSS 時(shí)使用 dark:bg-gray-950 一樣）。

與 Stimulus 一樣，我們先寫 HTML。這將引導(dǎo)我們接下來(lái)要寫什麼：

<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");
  }
}

雖然表面上很簡(jiǎn)單，但這裡有兩件事要注意：{ params: { value } }部分和toggle方法中的兩個(gè)屬性。

首先是 update 函數(shù)中的屬性。它使用了一種叫做破壞的東西。聽起來(lái)很困難，但事實(shí)並非如此，而且它是 JavaScript 的一個(gè)非?？岬墓δ堋Ｔ诶^續(xù)之前讓我們先檢查一下。

預(yù)設(shè)情況下，事件會(huì)傳遞給包含參數(shù)的 get 函數(shù)。您可能以前見過(guò)這個(gè)。

get(event) {
  log(event.params.value)
  // => "light" or "dark"
}

但是如果您不需要 event 物件中的任何其他內(nèi)容，則可以省略它，如下所示：

get({ params }) {
  log(params.value)
  // => "light" or "dark"
}

或是當(dāng)你想使用破壞時(shí)，你可以這樣做：

get({ params: { value } }) {
  log(value)
  // => "light" or "dark"
}

很酷，對(duì)吧？然後切換（“暗”，主題===“暗”）。第二個(gè)參數(shù)（theme ===“dark”）是一個(gè)布林強(qiáng)制參數(shù)，它明確設(shè)定是否應(yīng)該添加類別（true）或刪除類別（false），而不是僅來(lái)回切換

？覺得這一切太難理解了嗎？查看適用於 Rails 開發(fā)人員的 JavaScript。 ？

好的，太好了。使用上述控制器，您可以在明暗模式之間切換。也就是說(shuō)，如果您這樣連接了 CSS，但您注意到一旦螢?zāi)凰⑿?，預(yù)設(shè)螢?zāi)痪蜁?huì)恢復(fù)。所選主題未保留！

為此，我們引入 localStorage！它是一個(gè) Web 儲(chǔ)存 API，可讓您在瀏覽器中儲(chǔ)存鍵值對(duì)（字串）。

讓我們更新控制器以儲(chǔ)存所選值（「暗」或「亮」）。

<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");
  }
}

這就是為用戶儲(chǔ)存一些設(shè)定是多麼容易。請(qǐng)注意，這些值儲(chǔ)存（未加密）在其瀏覽器中。因此，如果他們使用其他瀏覽器，則設(shè)定不存在。但在他們重新啟動(dòng)瀏覽器後它也會(huì)被儲(chǔ)存（除非他們清除它）。

除了 setItem 和 getItem 之外，localStorage API 還提供了removeItem 和clear()。

以上是使用 Stimulus 將 UI 狀態(tài)儲(chǔ)存在 localStorage 中的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！