ブラウザでもデータ管理したい

[shari-sushi]

ブラウザにデータを保存する3つの方法

• 自動再生の音量(オン/オフ)
• 送信前のcreate, editの入力値
  • 関連: #230
• リンクコピーをyoutubeかv-karaokeか
• youtube playerをno cookieで使うかどうか
  とか(随時追加)

React Hooks を使って localStorage のデータを保存・取得する方法/ (翻訳っぽい)

localStorage は、アプリケーションにダークモード機能を追加したり、ToDo のデータを保存したり、ユーザーのフォーム入力値を永続化したり、その他多くの場面で頻繁に使用されます。

↑見る感じめっちゃ簡単そうでは？ もっと早くやれば良かった…

[shari-sushi]

storageに対するsubscribができるhookがあるらしい https://zenn.dev/daiki_21/articles/6b63cd3201bd7d

[shari-sushi]

トグルボタン

  const [checked, setChecked] = useState(localStorage.getItem("foo"))
  const handleChangeChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked)
    storage.setFoo(event.target.checked)
  }

<label className="flex w-96 justify-between cursor-pointer items-center">
    <div className="relative">
    <input 
      type="checkbox" 
      className="sr-only peer" 
      checked={checked} 
      onChange={handleChangeChecked}
    />
    <div className="w-11 h-6 bg-gray-400 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500" />
  </div>
</label>

https://dev.classmethod.jp/articles/tailwind-peer/

localstrage

 localStorage.getItem("Foo")
 localStorage.clear("Foo")
 localStorage.setItem("Foo","foo")