Webサイトを使っていると、
- ダークモード設定が保存される
- 入力途中のフォームが残っている
- 前回の設定が次回も反映される
といったことがあります。
こうした機能を実現する仕組みの一つが LocalStorage（ローカルストレージ） です。
LocalStorageは、ブラウザにデータを保存できる仕組みで、JavaScriptから簡単に扱うことができます。
しかし、初めて触れると
- Cookieとの違いは？
- どんな場面で使うの？
- 実際のコードはどう書くの？
と疑問に思うことも多いと思います。
この記事では、初心者でも理解できるように
- LocalStorageとは何か
- Cookieとの違い
- 基本操作（CRUD）
- 実際の使用例
をわかりやすく解説します。
LocalStorageとは？
LocalStorageとは
ブラウザにデータを保存できる仕組み（Web Storage API）
のことです。
JavaScriptを使って
- データを保存する
- データを取得する
- データを削除する
といった操作ができます。
特徴は
ブラウザにデータが保存されることです。
つまり、ページを再読み込みしても
データはそのまま残ります。
LocalStorageの特徴
LocalStorageには次のような特徴があります。
| 特徴 | 内容 |
|---|---|
| 保存場所 | ブラウザ |
| 容量 | 約5MB |
| 有効期限 | なし（削除されるまで残る） |
| JavaScript | 使用可能 |
つまり
ユーザーのブラウザにデータを保存できる簡易データベース
のようなものです。
Cookieとの違い
LocalStorageはCookieとよく比較されます。
違いをまとめると次の通りです。
| LocalStorage | Cookie | |
|---|---|---|
| 保存場所 | ブラウザ | ブラウザ |
| 容量 | 約5MB | 約4KB |
| 有効期限 | なし | 設定可能 |
| サーバー送信 | されない | される |
重要なポイントは
LocalStorageはサーバーに送信されない
という点です。
Cookieはリクエスト時に毎回サーバーへ送信されますが、
LocalStorageは ブラウザ内だけで使われるデータです。
LocalStorageの確認方法
LocalStorageはブラウザの検証ツールより、中身を確認することができます。
以下の流れで確認できます。
- 検証ツールを開く
- アプリケーションを開く
- ストレージから「ローカルストレージ」を開く
- 該当サイトをクリック
LocalStorageの基本操作（CRUD）
LocalStorageはJavaScriptで簡単に操作できます。
CRUDとは
| 操作 | 意味 |
|---|---|
| Create | 保存 |
| Read | 取得 |
| Update | 更新 |
| Delete | 削除 |
のことです。
データを保存する（Create）
LocalStorageにデータを保存するにはsetItem() を使用します。
第一引数にキーを、第二引数に値を指定します。
localStorage.setItem("username", "muta");このコードは
username = mutaというデータをブラウザに保存します。
データを取得する（Read）
保存したデータは getItem() で取得できます。
第一引数にキーを指定します。
const username = localStorage.getItem("username");
console.log(username);コンソールの結果
データを更新する（Update）
LocalStorageには更新専用メソッドはありません。
setItemをもう一度実行すると上書きされます。
localStorage.setItem("username", "suzuki");結果
username = suzukiになります。
データを削除する（Delete）
特定のデータを削除する場合はremoveItem() を使用します。
第一引数には削除したいデータのキーを指定します。
localStorage.removeItem("username");実行するとデータが削除されます。
すべてのデータを削除する
LocalStorageのデータをすべて削除する場合はclear() を使います。
localStorage.clear();オブジェクトを保存する方法
LocalStorageは 文字列しか保存できません。
そのため、オブジェクトを保存する場合はJSON.stringify() を使用します。
const user = {
name: "muta",
age: 30
};
localStorage.setItem("user", JSON.stringify(user));
取得する場合は以下のように記述します。
const storedUser = localStorage.getItem("user");
const parsedUser = JSON.parse(storedUser);
console.log(parsedUser);JSON.parse()を使用すると、JSON文字列をJavaScriptオブジェクトに変換することができます。
| メソッド | 役割 |
|---|---|
| JSON.stringify() | オブジェクト → JSON文字列に変換 |
| JSON.parse() | JSON文字列 → オブジェクトに変換 |
実際の使用例
LocalStorageは次のような場面でよく使われます。
ダークモード設定
ユーザーがダークモードを選択したとき
darkMode = trueのようなデータを保存しておけば、
次回アクセス時も同じ設定を使えます。
フォーム入力の保存
入力途中のフォーム内容を保存しておけば
- ページを閉じても
- 再度開いたときに復元
することができます。
UI設定の保存
例えば
- 言語設定
- 表示レイアウト
- フィルター設定
などの保存にも使われます。
LocalStorageの注意点
LocalStorageを使うときは
次の点に注意が必要です。
機密情報を保存しない
LocalStorageは
ブラウザから簡単に確認できます。
そのため
- パスワード
- トークン
- 個人情報
などは保存しないようにしましょう。
容量制限がある
LocalStorageは
約5MB程度
までしか保存できません。
まとめ
LocalStorageとは
ブラウザにデータを保存できる仕組み
です。
JavaScriptを使って
- 保存
- 取得
- 更新
- 削除
といった操作が簡単にできます。
主に
- UI設定の保存
- フォーム入力の保持
- ユーザー設定
などで使われることが多いです。
Cookieと比べると
- 容量が大きい
- サーバーに送信されない
という特徴があります。
Webアプリを作る際には、
Cookieやセッションと使い分けることが重要です。
