localStrageってなあに？
localStrageとはブラウザが提供するWeb Storage APIの一部です。
JavascriptなどでWeb上に直接データを保存することが出来ます。
手軽にデータが保存できるためすごい使いやすそうですが、どのようなメリット・デメリットがあるのか、また具体的にどのような場面で使用するのか気になり調べたのでまとめようと思います。
localStrageの基本的な操作
使用用途の前に、基本的な操作一覧を以下に記載します。(備忘録も兼ねられて一石二鳥ね)
データの保存：localStrage.setItem(key,value)
※keyは文字列のキー、valueは文字列の値
localStorage.setItem('MainCharaName', 'Tanjiro');
localStorage.setItem('age', '15'); // 数値も文字列として保存
データの取得：localStorage.getItem(key)
const username = localStorage.getItem('MainCharaName'); // 'Tanjiro'
const score = localStorage.getItem('Age'); // '15' (文字列として取得される)
データの削除：localStorage.removeItem(key)
localStorage.removeItem('Age');
全データの削除：localStorage.clear()
localStorage.clear();
現在のドメインのすべてのローカルストレージデータが削除される
キーの取得：localStorage.key(index)
const firstKey = localStorage.key(0);
保存されているアイテム数：localStorage.length
const itemCount = localStorage.length;
localStrageは値を常に文字列として保存するため、オブジェクトや数値を保存する際は文字列への変換(シリアライズ)、取得後の方への変換(デシリアライズ)がそれぞれ必要となります。
メリット
-
永続性
ブラウザが閉じられてもPCが再起動されてもデータが消えない。明示的に削除されるまでデータが保持される。 -
大容量
Cookie (通常4KB程度) と比較して、約5MB〜10MBと比較的大きなデータを保存できる。 -
簡単で直感的なAPI
setItem, getItem, removeItem, clear といったシンプルなメソッドで手軽にデータを操作できる。簡単に実装できるの最高。 -
クライアントサイドでの処理
サーバーとの通信なしにブラウザ内でデータの保存・読み込みが完結するため高速。
デメリット
-
セキュリティの脆弱性
保存されたデータはブラウザの開発者ツールから誰でも簡単に閲覧・編集できるため、XSS (クロスサイトスクリプティング) 攻撃等を受けた場合、localStorage内のデータが盗み出される可能性がある。
※機密情報 (パスワード、認証トークン、クレジットカード情報など) の保存には絶対に使用してはいけません。 -
同期処理
localStorage の読み書きは同期的に行われる。つまり大量のデータを保存したり、頻繁にアクセスしたりすると、UIのパフォーマンスが低下する恐れが... -
保存されるのは文字列型のみ
数値、真偽値、オブジェクト、配列などを保存する際は、手動で文字列に変換 (JSON.stringify()) し、読み込み後に元の型に戻す (JSON.parse()) 必要がある。めんどくさい。 -
容量制限
Cookieと比べるとだいぶ容量はあるが、5MB〜10MBという容量制限があるため画像ファイルや動画などのバイナリデータ、あるいは非常に大量のテキストデータの保存には不向き。 -
サーバーサイドでの利用不可
localStorage はブラウザの機能のため、Node.js などのサーバーサイド環境では利用不可。Next.js のような SSR (Server Side Rendering) を行うフレームワークで、サーバーサイドレンダリング中に localStorage にアクセスしようとするとエラーが発生。
どのような場合に使用する？
上記のメリット・デメリットをまとめると、セキュリティ要件が低く、比較的少量の、同期的に扱っても問題ない文字列データを扱う場合に使用するのが良さそうです。
また、Web上で値を管理するためわざわざログインするほどのことでもないデータを保存したい場合なんかはlocalStrageの出番ですね。
実際の使用例
-
簡単なユーザー設定の保存
ウェブサイトのデザインテーマ（ダークモード/ライトモード）、表示言語、フォントサイズ、通知設定、プライバシー設定（Cookieの同意状態）などの保存。これが恐らく一番よく使われてそう。 -
ショッピングカートの一時保存
ショッピングカートなどでユーザーが商品をカートに追加したものの、まだ購入を完了時ていない状態でブラウザを消したりした場合に保存。 -
フォーム入力の一時保存
ブログの投稿フォーム、コメント欄、アンケートフォームなど、比較的長めの文字を入力する場合、入力した内容を保存。(まさにQiitaの投稿フォームなどですね) -
最近閲覧した商品の履歴
ECサイトなどでユーザーが最近閲覧した商品の情報を保存し、サイトのトップページや特定のセクションで「最近見た商品」として表示できるようにする。(Amazonなど)
まとめ
簡単に実装が出来るため、使用出来る場面では積極的に使用したい優秀な機能だと感じました。
ただデメリットも思ったより結構あったので、使用する場合はきちんとリスクを鑑みましょう。
身近なサイトの機能にも使われていることを知れたのは意外な驚きがあってよかったです。