ローカルストレージについて
Webアプリでデータを保存する際、`localStorage`（ローカルストレージ）は最も手軽で便利な選択肢です。
ご質問の「保存容量」や「文字数」について、ポイントを整理して解説します。
---
## 1. ローカルストレージの保存容量
結論から言うと、一般的に **「1サイト（ドメイン）につき 5MB」** が目安です。
* **デバイスによる違い:** 基本的にパソコン（Windows/Mac）でもスマホ（iPhone/Android）でも、主要なブラウザであれば **5MB** で統一されていることが多いです。
* **日本語（2バイト文字）で何文字書けるか:** 多くのブラウザはデータを「UTF-16」という形式で保存します。この形式では、**1文字＝2バイト**としてカウントされるため、**最大で約250万文字**保存できる計算になります。
> **計算式:** 5MB = 5,242,880バイト ÷ 2 = **2,621,440文字**
> ※実際には「キー（保存名）」の長さも容量に含まれるため、これより少し少なくなります。
---
## 2. 最も簡単なコード例（保存と取得）
プログラムは非常にシンプルです。ブラウザのコンソールなどで試すこともできます。
### 基本の3ステップ
```javascript
// 1. 保存する（setItem）
localStorage.setItem('user_name', '田中太郎');
// 2. 取り出す（getItem）
const name = localStorage.getItem('user_name');
console.log(name); // 「田中太郎」と表示される
// 3. 削除する（removeItem）
localStorage.removeItem('user_name');
```
### 配列やオブジェクトを保存する場合
ローカルストレージは「文字列」しか保存できないため、複数のデータをまとめて保存したいときは **JSON** という形式に変換して保存するのが一般的です。
```javascript
const user = { name: "田中", age: 25 };
// 保存：オブジェクトを文字列に変換（JSON.stringify）
localStorage.setItem('userData', JSON.stringify(user));
// 取得：文字列をオブジェクトに戻す（JSON.parse）
const data = JSON.parse(localStorage.getItem('userData'));
console.log(data.name); // 「田中」
```
---
## 3. 注意点と使い分け
| 特徴 | ローカルストレージ | クッキー (Cookie) | IndexedDB (大規模保存) |
| **容量** | **約 5MB** | 約 4KB (極小) | 数百MB以上 (端末に依存) |
| **期限** | **削除するまで永続** | 指定した期限まで | 削除するまで永続 |
| **使いやすさ** | **非常に簡単** | 少し複雑 | かなり複雑 |
ローカルストレージ vs IndexedDB 比較表
比較項目 ローカルストレージ (LocalStorage) IndexedDB
容量の目安 約 5MB (どの端末でもほぼ一定) 数百MB 〜 数GB (空き容量に依存)
データの形式 文字列のみ (JSON変換が必要) オブジェクト・画像・ファイルも可
検索・抽出 苦手 (全データを読み出す必要がある) 得意 (索引を使って高速に探せる)
動作の仕組み 同期処理 (保存中に画面が止まるリスク) 非同期処理 (裏で動くので画面がスムーズ)
実装の難易度 とても簡単 (1行で書ける) 難しい (専門知識が必要)
* **セキュリティ:** パスワードや個人情報などの機密データは保存しないようにしましょう（JavaScriptから簡単に中身が見えてしまうため）。
* **消えるタイミング:** ユーザーがブラウザのキャッシュを完全に削除したり、iPhoneのSafariなどで「プライベートブラウズ」モードを使っている場合は、保存されないことがあります。
---