サイトを開いた時に前回の情報を元に表示する (localStorage)

1. やりたいこと

画面のスクロール位置や入力していた値などを記録しておいて、次回ページを開いたときに記録された情報を元に同じ画面を復元するようにしたい

2. 実現方法

方法としては以下の3つがあると思います

1. サーバー側でDBなどに記録する
2. cookieを使ってサーバーに情報を保持する方法
3. localStorageでユーザーPCのブラウザに保持してもらう方法

今回はセキュリティに関わらない情報を保存するので手軽に使えるlocalStorageを使います

3. localStorageについて

3-1. どういうものか

localStorageはhtml5から導入されたWeb Storage APIの機能です。Web Storage APIにはブラウザでページを閉じてセッションが終わるまでの間保持するsessionStorageと、永続的に保存されるlocalStorageの2つがあり、今回はセッション終了後も残っていてほしいのでlocalStorageを利用します

3-2. cookieとの違い

ログインしていないユーザーの情報を扱えるという点でcookieと似ている部分がありますが、サーバー側に情報を持つcookieとブラウザ側に情報を保存するWeb Storage API、容量が4kBしかないcookieと5MB持てるWeb Storage APIと位置づけがかなり変わるようです
https://zenn.dev/sjbworks/articles/cookie-webstorage

3-3. 容量の制約

Web Storage APIはオリジン単位で容量制限があり、これを超過して保存しようとするとQuotaExceededErrorが出て保存できません。また、ブラウザごとにサブドメイン単位での容量制限もあるのであまり大きい容量の情報を持つような使い方は想定されていないようです。最初から大きな容量を置かないようにするか削除しながら使うかになりますね
https://qiita.com/non_cal/items/b8a3779f93a252f0f796

3-4. 注意点

シンプルで便利なWeb Storage APIですが、JavaScriptからは置いてある情報が丸見えなので、XSS攻撃などによりJavaScriptがすり替えられると情報を奪われるリスクがありますのでセッション情報などのセキュリティに関わる情報は保存すべきでないと警告されています
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

4. 使い方

使い方については以下のドキュメントに書かれています
https://developer.mozilla.org/ja/docs/Web/API/Storage

4-1. 保存する

JavaScript

localStorage.setItem(keyName, keyValue)

4-2. 読み込む

当該keyNameで保存がない場合はnullが返ってきます

JavaScript

localStorage.getItem(keyName)

4-3. 削除する

JavaScript

localStorage.removeItem(keyName)

4-4. まとめて削除する

JavaScript

localStorage.clear()

まとめ

いろいろ注意点はありますが圧倒的に簡単です
問題のない用途も結構あると思うので、上手く使いたいと思います

レッツトライ