この記事は元々 Rails Designer で公開されたものです

SaaS アプリでは、特定のユーザー設(shè)定や外観設(shè)定を保存するのが非常に一般的です。フォントサイズ、テーマカラー、アコーディオンの開閉狀態(tài)など。

(私の新しい SaaS のこの例は、ナビゲーションのセクションの狀態(tài)を保存します)

特にセッション間または異なるブラウザ間で設(shè)定を復(fù)元する必要がある場(chǎng)合は、これらの設(shè)定をユーザーに保存できます。 Rails の簡(jiǎn)単な設(shè)定の追加については、この記事で説明しました。ただし、これらの設(shè)定を永続化する必要がない場(chǎng)合、これは非常に優(yōu)れたシンプルな代替手段です。

これには、小さくて再利用可能な JavaScript 関數(shù)とブラウザの localStorage が含まれます。早速見ていきましょう。

この例では、ユーザーのテーマをライトまたはダークに保存します。ダークの場(chǎng)合、html要素にダーククラスが追加されます。これは、他の要素をターゲットにするために使用できます (Tailwind CSS を使用する場(chǎng)合の dark:bg-gray-950 と同様)。

Stimulus の場(chǎng)合と同様に、最初に 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");
  }
}

表面的には単純ですが、ここで 2 つのことに注意してください。それは、{ params: { value } } 部分と toggle メソッドの 2 つの屬性です。

まず、update 関數(shù)の屬性です。 破壊と呼ばれるものを使用します。難しそうに思えますが、そんなことはありません。これは JavaScript の非常に優(yōu)れた機(jī)能です。次に進(jìn)む前に確認(rèn)してみましょう。

デフォルトでは、イベントはパラメータを含む get 関數(shù)に渡されます。おそらくこれを以前に見たことがあるでしょう。

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

しかし、event オブジェクトに他に何も必要ない場(chǎng)合は、次のように省略できます。

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

または、破棄を使用したい場(chǎng)合は、次のようにすることができます:

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

いいですね?次に、toggle("dark", theme === "dark") をクリックします。 2 番目のパラメータ (theme === "dark") は、単に前後に切り替えるのではなく、クラスを追加するか (true)、削除するか (false) を明示的に設(shè)定するブール型の強(qiáng)制パラメータです

?これを理解するのは難しすぎると思いませんか? Rails 開発者向けの JavaScript を確認(rèn)してください。 ?

わかりました、素晴らしいです。上記のコントローラーを使用すると、ライトモードとダークモードを切り替えることができます。つまり、CSS をそのように設(shè)定していても、畫面を更新するとデフォルトの畫面に戻っていることに気づいた場(chǎng)合です。選択したテーマは永続化されません!

そのために、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>

コントローラーの接続時(shí)に、値を読み取ります:

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

ユーザーの設(shè)定を保存するのがとても簡(jiǎn)単です。これらの値はブラウザーに (暗號(hào)化されずに) 保存されることに注意してください。したがって、別のブラウザを使用している場(chǎng)合、設(shè)定は存在しません。ただし、ブラウザを再起動(dòng)した後も保存されます (クリアしない限り)。

setItem と getItem に加えて、localStorage API には、removeItem と clear() もあります。

以上がStimulus を使用して UI 狀態(tài)を localStorage に保存するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。