ページを閉じても、さっきの設定を覚えていた。ブラウザに直接残す小さなメモ

くらしラボの記事一覧で、ダークモードに切り替えてページを移動したら、次のページでは元の白い画面に戻っていた。
切り替えたはずなのに、毎回やり直しになる。

サーバー側で覚えさせるほどの話でもない。
ログインもしていないし、データベースに保存するには小さすぎる。
探していくと、localStorageというブラウザ自身が持っている置き場所にたどり着いた。

サーバーを介さず、ブラウザの中だけで完結する

これまで「状態を覚えておく」といえば、サーバーに送って、データベースに書いて、次に読み込むときにまた取ってくる、という流れを思い浮かべていた。
localStorageは、その全部を飛ばす。

localStorage.setItem('theme', 'dark');
と書けば、ブラウザの中に直接「theme」というキーで「dark」という値を残せる。
読み出すときは
localStorage.getItem('theme');
とするだけで、サーバーへの通信は一切発生しない。

タブを閉じても、パソコンを再起動しても残る

似たものにsessionStorageがあるのは知っていた。
違いは、消えるタイミングだった。

sessionStorageは、タブを閉じると消える。
localStorageは、明示的に消すかブラウザ側でクリアしない限り、パソコンを再起動しても残り続ける。
ダークモードのような「次に来たときも覚えていてほしい」設定には、localStorageのほうが合っていた。

入れられるのは文字列だけだった

最初、配列やオブジェクトをそのまま入れようとしてハマった。
localStorageに保存できるのは文字列だけで、オブジェクトを渡すと「[object Object]」という意味のない文字列に化けてしまう。

保存するときはJSON.stringify()で文字列に変換し、
読み出すときはJSON.parse()で元の形に戻す。
このひと手間を忘れると、保存はできているのに読み出した瞬間にエラーになる。

他人のブラウザの中は見えない

もう一つ気づいたのが、localStorageはあくまでその人のブラウザの中だけの話だということだった。
僕のパソコンで設定したダークモードは、僕のパソコンでしか有効にならない。
家族のパソコンで同じサイトを開いても、初期状態のままだ。

複数の端末で同じ設定を共有したいなら、結局サーバー側に保存する仕組みが必要になる。
localStorageは「その端末限定でよければ、いちばん手軽」という立ち位置のものだった。

容量にも上限がある

もう一つ、容量の上限も忘れないようにしている。
ブラウザによって差はあるが、だいたい5MB前後が目安とされている。
ダークモードのオン・オフのような小さな値なら気にする必要はないが、大きなデータを詰め込む場所ではない。

いまはダークモードの設定と、直近に開いたカテゴリの記憶にだけ使っている。
ページをまたいでも設定が消えなくなってから、切り替えのやり直しがなくなった。