Simpan Keadaan UI dalam localStorage dengan Rangsangan

Artikel ini pada asalnya diterbitkan di Rails Designer

---

Ia adalah perkara biasa dalam apl SaaS untuk menyimpan pilihan pengguna tertentu atau tetapan penampilan. Perkara seperti saiz fon, warna tema atau keadaan terbuka/tertutup akordion.

(contoh dari SaaS baharu saya ini menyimpan keadaan bahagian navigasi)

Anda boleh menyimpan tetapan tersebut kepada pengguna, terutamanya jika anda perlu memulihkan tetapan tersebut antara sesi atau penyemak imbas yang berbeza. Saya mendapat maklumat tentang artikel ini tentang menambah pilihan mudah untuk Rails. Tetapi jika tetapan ini tidak perlu diteruskan, ini adalah alternatif yang sangat bagus dan mudah.

Ia melibatkan fungsi JavaScript yang kecil dan boleh diguna semula serta LocalStorage penyemak imbas. Jom terjun terus.

Untuk contoh ini saya akan menyimpan tema untuk pengguna, sama ada terang atau gelap. Apabila gelap, kelas gelap ditambahkan pada elemen html. Ini kemudiannya boleh digunakan untuk menyasarkan elemen lain (seperti dengan dark:bg-gray-950 apabila menggunakan CSS Tailwind).

Selalunya dengan Stimulus, mari kita tulis HTML dahulu. Ini akan membimbing kita apa yang perlu ditulis seterusnya:

<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>

Kemudian pengawal:

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

Walaupun mudah di permukaan, terdapat dua perkara yang perlu diperhatikan di sini: bahagian { params: { value } } dan dua atribut dalam kaedah togol.

Mula-mula atribut dalam fungsi kemas kini. Ia menggunakan sesuatu yang dipanggil memusnahkan. Kedengaran sukar, tetapi ia tidak dan ia adalah ciri JavaScript yang sangat hebat. Jom semak sebelum pergi lebih jauh.

Secara lalai acara diserahkan kepada fungsi get yang mengandungi param. Anda mungkin pernah melihat ini sebelum ini.

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

Tetapi jika anda tidak memerlukan apa-apa lagi dalam objek acara, anda boleh meninggalkannya, seperti:

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

Atau apabila anda ingin menggunakan memusnahkan, anda boleh melakukan ini:

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

Sejuk kan? Kemudian togol("gelap", tema === "gelap"). Parameter kedua (tema === "gelap") ialah parameter daya boolean yang secara eksplisit menetapkan sama ada kelas harus ditambah (benar) atau dialih keluar (salah), dan bukannya hanya menogol ke belakang dan ke belakang

? Adakah ini terlalu sukar untuk membungkus kepala anda? Semak JavaScript untuk Pembangun Rails. ?

Baiklah, bagus. Dengan pengawal di atas anda boleh bertukar-tukar antara mod terang dan gelap. Iaitu, jika anda mempunyai CSS anda berwayar sedemikian, tetapi anda perasan bahawa sebaik sahaja skrin dimuat semula, skrin lalai kembali. Tema yang dipilih tidak diteruskan!

Untuk itu, mari perkenalkan localStorage! Ia ialah API storan web yang membolehkan anda menyimpan pasangan nilai kunci (rentetan) dalam penyemak imbas.

Mari mengemas kini pengawal untuk menyimpan nilai yang dipilih ("gelap" atau "terang").

<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>

Kemudian apabila pengawal menyambung, baca nilai:

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

Begitulah mudahnya menyimpan beberapa tetapan untuk pengguna. Ambil perhatian bahawa nilai ini disimpan (tidak disulitkan) dalam penyemak imbasnya. Jadi jika mereka menggunakan pelayar lain, tetapan tidak ada di sana. Tetapi ia juga disimpan selepas mereka memulakan semula penyemak imbas (melainkan mereka mengosongkannya).

Selain setItem dan getItem, localStorage API juga removeItem dan clear().

Atas ialah kandungan terperinci Simpan Keadaan UI dalam localStorage dengan Rangsangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!