【JavaScript】Webストレージの使い方を解説｜Webの基礎

はじめに

前回の記事では、オブジェクトや配列のデータをJSON文字列に変換する方法を解説しました。今回はその変換したデータを、ブラウザ側に保存しておける仕組み「localStorage」「sessionStorage」について解説します。

これまでのJavaScriptの処理は、ページを再読み込みしたりタブを閉じたりすると、変数に入れていたデータはすべて消えてしまっていました。localStorage・sessionStorageを使うと、入力フォームの下書きやユーザーの設定など、ちょっとしたデータをブラウザ側に保持しておけるようになります。以前解説したウィンドウの操作方法やブラウザの仕組みの続編としても位置づけられる内容です。

今回でWebの基礎「JavaScript編」は一区切りとなります。最後まで、ぜひご覧ください。

localStorage・sessionStorageとは？

localStorage・sessionStorageは、ブラウザ内にデータを「キーと値のペア」で保存できる仕組みです。まとめてWeb Storage（ウェブストレージ）と呼ばれます。

VBAで言えば、ワークシートの特定セルに設定値をメモしておき、ファイルを閉じて開き直しても参照できるようにしておく使い方に近いイメージです。JavaScriptの変数はページを離れると消えてしまいますが、Web Storageに保存したデータはブラウザ側に残ります。

似た仕組みに「Cookie」がありますが、Cookieはサーバーへの通信のたびに自動送信されるのに対し、Web StorageはJavaScriptからしかアクセスされず、サーバーへの送信も発生しません。保存できる容量も、Cookie（4KB程度）よりWeb Storage（5MB程度）の方が大きく確保されています。

localStorage・sessionStorageは、同一オリジン（プロトコル・ドメイン・ポートが同じ）ごとに独立して保存されます。他サイトのページから、自分のサイトが保存したデータを読み取ることはできません。

基本の操作方法（保存・取得・削除）

localStorage・sessionStorageは、どちらも同じメソッドで操作します。まずはlocalStorageを例に見ていきましょう。

// 保存する
localStorage.setItem("userName", "山田太郎");

// 取得する
const name = localStorage.getItem("userName");
console.log(name); // "山田太郎"

// 1件削除する
localStorage.removeItem("userName");

// すべて削除する
localStorage.clear();

• setItem(キー, 値)：データを保存する（同じキーで再度呼び出すと上書きされる）
• getItem(キー)：データを取得する（保存されていないキーの場合はnullが返る）
• removeItem(キー)：指定したキーのデータだけを削除する
• clear()：保存されているデータをすべて削除する

sessionStorageもメソッド名は完全に同じで、localStorageの部分をsessionStorageに置き換えるだけで使えます。

sessionStorage.setItem("searchKeyword", "Excel VBA");
console.log(sessionStorage.getItem("searchKeyword")); // "Excel VBA"

localStorageとsessionStorageの違い

2つの違いは、データが残る期間と、共有される範囲です。

「ずっと覚えておいてほしい設定」はlocalStorage、「このタブを閉じたら忘れてよい一時データ」はsessionStorage、と使い分けるのが基本方針です。

localStorage・sessionStorageは、ブラウザの「プライベートブラウジング」「シークレットモード」では、利用できなかったり保存容量が極端に制限されたりする場合があります。パスワードなど重要な情報の保存には使わないでください。

オブジェクト・配列を保存する

localStorage・sessionStorageに保存できる値は、文字列のみです。数値や真偽値を渡しても自動的に文字列へ変換されてしまい、オブジェクトを渡すと"[object Object]"という意味のない文字列になってしまいます。

const user = { name: "山田太郎", age: 30 };

localStorage.setItem("user", user);
console.log(localStorage.getItem("user")); // "[object Object]"（中身が失われている）

そこで登場するのが、前回解説したJSONです。オブジェクトや配列を保存したいときはJSON.stringify()で文字列に変換してからsetItem()に渡し、取り出すときはJSON.parse()でオブジェクトに戻します。

const user = { name: "山田太郎", age: 30 };

// 保存：オブジェクト → JSON文字列
localStorage.setItem("user", JSON.stringify(user));

// 取得：JSON文字列 → オブジェクト
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "山田太郎"

保存されていないキーをgetItem()するとnullが返るため、JSON.parse(null)のようなエラーを避けたい場合は、以下のように存在チェックをしておくと安全です。

const savedJson = localStorage.getItem("user");
const savedUser = savedJson ? JSON.parse(savedJson) : null;

実務サンプル（フォームの下書き自動保存＋検索履歴の一時保存）

フォーム操作を解説した記事の入力フォームを例に、localStorageとsessionStorageをそれぞれの特性に合わせて使い分けたサンプルを作ってみます。

• 入力中のフォーム内容 → localStorageに自動保存し、うっかりタブを閉じても次に開いたときに復元する
• 直近の検索キーワード → sessionStorageに保存し、このタブを閉じたら履歴も消える一時的な記録にする

const form = document.getElementById("memoForm");
const nameInput = document.getElementById("name");
const memoInput = document.getElementById("memo");

// ページを開いたときに下書きを復元
window.addEventListener("DOMContentLoaded", () => {
    const draft = localStorage.getItem("formDraft");
    if (draft) {
        const data = JSON.parse(draft);
        nameInput.value = data.name;
        memoInput.value = data.memo;
    }
});

// 入力のたびに下書きを自動保存
form.addEventListener("input", () => {
    const data = {
        name: nameInput.value,
        memo: memoInput.value,
    };
    localStorage.setItem("formDraft", JSON.stringify(data));
});

// 送信が完了したら下書きを削除
form.addEventListener("submit", (event) => {
    event.preventDefault();
    localStorage.removeItem("formDraft");
    alert("送信しました");
});

function addSearchHistory(keyword) {
    const historyJson = sessionStorage.getItem("searchHistory");
    const history = historyJson ? JSON.parse(historyJson) : [];

    history.unshift(keyword); // 先頭に追加
    sessionStorage.setItem("searchHistory", JSON.stringify(history.slice(0, 5))); // 最新5件のみ保持
}

addSearchHistory("Excel VBA");
addSearchHistory("Power Query");

console.log(JSON.parse(sessionStorage.getItem("searchHistory")));
// ["Power Query", "Excel VBA"]

formDraftはブラウザを閉じてもlocalStorageに残るため、うっかりタブを閉じてしまっても入力内容が失われません。一方searchHistoryはsessionStorageに保存しているため、そのタブを閉じれば消え、次に新しく開いたタブでは空の履歴からスタートします。

よくある質問・エラー対処

Q. 保存できるデータ量に上限はありますか？

→ ブラウザによって多少異なりますが、localStorage・sessionStorageとも1オリジンあたり5MB前後が目安です。大量の画像データなど大きなデータの保存には向いていません。上限を超えるとQuotaExceededErrorが発生します。

Q. 保存したデータを他のタブでもすぐに検知したいです。

→ windowのstorageイベントを使うと、同一オリジンの別タブでlocalStorageが変更されたタイミングを検知できます（自分自身のタブでの変更では発火しません）。複数タブを同期させたい場合に活用できます。

window.addEventListener("storage", (event) => {
    console.log(`${event.key}が更新されました：`, event.newValue);
});

Q. sessionStorageは、同じページを開いている複数タブ間で共有されますか？

→ されません。同じURLを開いていても、タブごとに別々のsessionStorageが用意されます。ただし、同じタブ内でリンクをクリックして別ページに遷移した場合や、そのタブを複製した場合は、sessionStorageの内容が引き継がれます。

おわりに（まとめ）

これで、Webの基礎「JavaScript編」は一区切りです。次回からはPHPの基礎について解説していく予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

• 【JavaScript】JSONの扱い方を解説
• 【JavaScript】Fetch APIの使い方を解説
• 【JavaScript】フォーム（formタグ）の操作を解説
• 【JavaScript】ウィンドウの操作方法を解説
• Webページに関する基礎的な勉強を始めます

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】記事内サンプルファイルダウンロードのページ 【Excel VBA】の記事内で使ったサンプルファイルを（Zipファイルで）ダウンロードできるようにしました。記事内では細かい部分の解説が不十分ですが、実際にファイルをダウ…