Stimulus를 사용하여 UI 상태를 localStorage에 저장

이 기사는 원래 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 } } 부분과 토글 메서드의 두 속성입니다.

먼저 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"
}

멋지죠? 그런 다음 토글("dark", theme === "dark")을 사용합니다. 두 번째 매개변수(theme === "dark")는 단순히 앞뒤로 전환하는 것이 아니라 클래스를 추가해야 하는지(true) 제거해야 하는지(false) 명시적으로 설정하는 부울 강제 매개변수입니다

? 이 모든 것이 머리를 감싸기에는 너무 어렵다고 생각하시나요? Rails 개발자를 위한 JavaScript를 확인해 보세요. ?

알겠습니다. 좋습니다. 위의 컨트롤러를 사용하면 밝은 모드와 어두운 모드 사이를 전환할 수 있습니다. 즉, CSS가 이와 같이 연결되어 있지만 화면이 새로 고쳐지면 기본 화면으로 돌아가는 것을 알 수 있습니다. 선택한 테마가 지속되지 않습니다!

이를 위해 localStorage를 소개하겠습니다! 키-값 쌍(문자열)을 브라우저에 저장할 수 있는 웹 스토리지 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!