Stimulus を使用して UI 状態を localStorage に保存する

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

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

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

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

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

この例では、ユーザーのテーマをライトまたはダークに保存します。ダークの場合、html要素にダーククラスが追加されます。これは、他の要素をターゲットにするために使用できます (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");
  }
}

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

まず、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"
}

いいですね?次に、toggle("dark", theme === "dark") をクリックします。 2 番目のパラメータ (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 中国語 Web サイトの他の関連記事を参照してください。