はじめに！
iimonでエンジニアをしています。奥島です
今回は、データベースを使わずに、ブラウザだけで手軽にデータを保存できる「Webストレージ（localStorage・sessionStorage）」について調べてみました。 Webアプリやサイトの開発では、ちょっとしたユーザーデータを保存したい場面が多くありますが、そのようなときに便利なのがWebストレージです。 CookieやIndexedDB、Cache APIなど他の保存手段もありますが、Webストレージは実装が簡単で、軽量なデータの保存に特に適しているかと思います！
ストレージの種類
■ Cookie
- 特徴
- ブラウザでデータを保持して、そのデータはサーバにも同時に送られるのがCookie特徴です。
- 保存できる容量は約4KBほどらしいです。
- 使われる用途
■ IndexedDB
- 特徴
- オブジェクト（画像・動画など）や複雑なデータ構造も保存が出来ます。
- トランザクションベースでデータの読み書きが出来ます。
- 使われる用途
- オフライン対応(インターネットに接続されていない時でもデータを扱えるように、アプリやウェブサイトの状態やデータをローカルに保存)などです
- 大量データの保存(Web Storage（localStorageなど）よりも多くのデータを保存)などです
- JavaScript のオブジェクトなど、複雑な構造のデータを保存・検索などです
■ Cache API
- 特徴
- ウェブページで使ったデータ（HTMLや画像など）を保存しておける仕組みです。保存したデータは、あとで同じリクエストが来たときに再利用が出来ます。
- 使われる用途
- 同じAPIの結果を何度も使いたいとき(天気予報のデータなど、一度取得したデータをキャッシュしておいて再利用)などです
■ Web Storage（localStorage / sessionStorage）
- 共通の特徴
- キーと値のペアでデータを保存する事が出来ます。
- 同一オリジン内でのみアクセス可能
「同一オリジン」とは？ オリジン（Origin）とは、以下の3つをセットにしたものです 1. スキーム（プロトコル）：http か https などです。 2. ホスト名（ドメイン）：example.com などです。 3. ポート番号：httpなら80、httpsなら443などです。
同じオリジンの例（→ Web Storage共有可能）URL①:https://example.com URL②:https://example.com/about 解説:両方ともプロトコル・ドメイン・ポートが同じなので共有する事が出来ます。
別オリジンの例（→ Web Storage共有できない）URL①:https://example.com URL②:http://example.com 解説:プロトコルが違う（https と http）
- 非同期処理は不要で、localStorage や sessionStorage は同期的に動作します。通常の変数のようにすぐに値を保存・取得で await や Promise は不要です。
■ Web Storage（localStorage ）
- 特徴
- ブラウザを閉じてもデータが保持される永続的に保存する事が出来きます。
- 容量はおよそ5MB程度（ブラウザにより異なるらしいです）
- 使われる用途
- フォームの一時保存や閲覧履歴などです
- 一時的なデータのキャッシュなどです
■ Web Storage（sessionStorage ）
- 特徴
- ページのセッションが終了すると削除される一時的なストレージです。
- ウィンドウやタブを閉じると自動的にクリアされちゃいます。
- 使われる用途
- 一時的な状態の管理（ユーザーが途中まで入力したけど、別のページをちょっと見に行った時）などです
- セッション中だけ必要な情報の保存(ブラウザやタブを閉じたら、ログイン情報も一緒に消えてくれたほうが安全)
- タブごとの独立データ管理(タブ間でデータを共有したくないとき)
1.Web Storage（localStorage ）
- ローカルストレージには、
setItemを使ってデータを保存する事が出来ます。
// 第一引数 : key // 第二引数 : 値 // setItemでキーと値を保存 localStorage.setItem('localStorage', 'ローカルストレージのデータ');
ローカルストレージにデータが保存されていることを確認する事が出来ます。
ローカルストレージに保存されたデータは、
getItemを使って取得する事が出来ます。
// Consoleでデータの確認 console.log(localStorage.getItem('localStorage'));
Consoleで取得したデータの確認する事が出来ます 。
配列のデータも
setItemを使って保存する事が出来ます。 localStorage や sessionStorage は 文字列（string）しか保存できないので、JSON.stringifyを使って 配列を文字列に変換して保存する必要があります。
//配列データの保存 const fruits = ['りんご', 'みかん', 'ぶどう']; localStorage.setItem('frutis', JSON.stringify(frutis)); })
localStorageに保存されたデータを確認する事が出来ます 。
ローカルストレージに保存された配列データは、
getItemを使って取得する事が出来ます。
// 配列データを取得 JSON.parse(localStorage.getItem('frutis')).forEach((fruit) => { console.log(fruit); })
Consoleで取得したデータの確認する事が出来ます 。
オブジェクトデータも、
setItemを使って保存する事が出来ます。 localStorage や sessionStorage は 文字列（string）しか保存できないので、JSON.stringifyオブジェクトを文字列に変換して保存する必要があります。
// personというオブジェクトを準備 const person ={ name: '山田太郎', age: 30, address: '東京都' } // オブジェクトも配列と同じです。 localStorage.setItem('person', JSON.stringify(person));
localStorageにpersonという名前でオブジェクトを保存する事が出来ます。
ローカルストレージに保存されたオブジェクトデータは
getItemを使って取得する事が出来ます。
const personData = JSON.parse(localStorage.getItem('person')); console.log(personData.name);
parseのオブジェクトデータが取得する事が出来ます。
オブジェクトデータを更新
// person データの準備 const person = { name: '山田太郎', age: 30, address: '東京都' }; // 変更前のデータを保存して表示 localStorage.setItem('person', JSON.stringify(person)); console.log('変更前:', JSON.parse(localStorage.getItem('person')));
- オブジェクトデータの更新前
- personオブジェクトを更新して再保存
// personオブジェクトの age を31に変更します。 person.age = 31; localStorage.setItem('person', JSON.stringify(person));
- 変更後のデータを取得して表示
const updatedPersonData = JSON.parse(localStorage.getItem('person')); console.log('変更後:', updatedPersonData);
2.Web Storage（sessionStorage ）
- セッションストレージのデータを保持
- sessionStorage.setItem('session', 'セッションストレージのデータ');
結果
- セッションストレージのデータを取得
console.log(sessionStorage.getItem('session'));
結果
【まとめ】 今回は、これまであまり意識せずに使っていた「データの扱い方」について、ストレージという仕組みを通して改めて理解を深めることができました。 曖昧だった部分が少しクリアになったように感じます。
ここまで読んでくださり、ありがとうございます！✨
この記事を読んで少しでも興味を持ってくださった方は、ぜひカジュアル面談でお話ししましょう！
iimon採用サイト / Wantedly / Green
