LocalStorageの概要
LocalStorageは、Webブラウザが提供するキーと値のペアを保存する仕組みです。
クライアントサイドにデータを永続的に保存する際に利用します。
主な特徴
- データの永続性：ブラウザを閉じてもデータが保持される
- 最大容量：約5MB
- サーバー通信を必要としない
SessionStorageとの違い
よく比較されるSessionStorageとの違いも押さえておきましょう
| LocalStorage | SessionStorage | |
|---|---|---|
| データの保存期間 | ブラウザを閉じてもデータが保持される | ブラウザやタブを閉じるとデータが削除される |
| データの共有 | 異なるタブ間でデータが共有される | 同一タブ内でのみデータが共有される |
ここから見るにLocalStorageは永続的なデータの保存に適していることが分かります
LocalStorageの基本的な使い方
javascript
// データの保存
localStorage.setItem('key', 'value');
// データの取得
const value = localStorage.getItem('key');
// データの削除
localStorage.removeItem('key');
// ストレージのクリア
localStorage.clear();
LocalStorageの用途
ユーザー設定の保存などに使われることが多いです。
例
- テーマ（ライトモード/ダークモード）
- 言語選択
- ショッピングカートの中身
ダークモードの切り替えを保存の例をコードにしてみます
javascript
const toggleDarkMode = () => {
// 現在のテーマの設定がダームモードであるかをローカルストレージから取得
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// isDarkModeに応じてWebサイト上のダークモードトグルをON/OFF
document.body.classList.toggle('dark-mode', !isDarkMode);
// ローカルストレージにダークモードの設定を保存
localStorage.setItem('darkMode', !isDarkMode);
};
セキュリティと注意点
機密情報（パスワード、トークンなど）は保存しないようにしましょう。
なぜなら、LocalStorageはJavascriptで簡単にアクセスできてしまうからです。
XSS（クロスサイトスクリプティング）という攻撃者がWebサイトに悪意のあるスクリプトをフォームなどに仕込んで挿入する攻撃があるのですが、XSSでLocalStorageの中身を盗聴することができます。
フォームの検証やサニタイズなど対策はありますが、LocalStorageに機密情報を入れないが吉でしょう。
まとめ
LocalStorageは、クライアントサイドのデータ保存に便利な機能として提供されています。
ユーザー体験の向上やデータキャッシュに活用できますが、セキュリティには注意が必要です。
読んでいただきありがとうございました！