【JS API】初心者ガイド:Local Storage

「Local Storage」とは、ブラウザ内にデータを半永久的に保存できるJavaScript APIです。データはキーとバリューのペアで保存され、ブラウザを閉じても保持されます。容量は約5MBあり、以下のような入力データの保存や、ユーザー設定の保存に適しています。

ページをリロードしたりブラウザを閉じたりしても、入力した内容が保存されて「こんにちは、〇〇」という形で表示されます。(クリアボタンを押すと保存内容がリセットされます。)

HTML / JavaScript コードはこちら
<form id="nameForm">
    <label for="nameInput">名前を入力してください:</label>
    <input type="text" id="nameInput">
    <button type="submit">保存</button>
    <button type="button" id="clearStorageButton">クリア</button>
</form>
<p id="greeting"></p>
const nameInput = document.getElementById('nameInput');
const greeting = document.getElementById('greeting');
const nameForm = document.getElementById('nameForm');
const clearStorageButton = document.getElementById('clearStorageButton');

// Local Storageから名前を取得して表示する関数
function displayGreeting() {
    const storedName = localStorage.getItem('name');
    if (storedName) {
        greeting.innerHTML = `こんにちは、<span style="color:red; font-weight: bold;">${storedName}</span>!`;
    } else {
        greeting.textContent = 'Local Storage Example';
    }
}

// フォームが送信されたときに名前を保存する
nameForm.addEventListener('submit', (event) => {
    event.preventDefault(); // フォームのデフォルトの送信を防ぐ
    const name = nameInput.value;
    localStorage.setItem('name', name);
    displayGreeting();
});

// Local Storage(name)をクリアする
clearStorageButton.addEventListener('click', () => {
  localStorage.removeItem('name');
  displayGreeting();
});

// 初回ロード時に名前を表示する
displayGreeting();

このAPIを応用すれば、ブラウザを閉じても保存できるTo-Doリストも簡単に作れちゃいます。

目次

Local Storage の特徴

永続性

データはブラウザを閉じても保持され、ユーザーが明示的に削除するか、JavaScriptから削除するまで残る。
Local Storageと似た機能にセッションストレージがあり、セッションストレージのデータはタブやウィンドウを閉じると消える。

容量

cookieの容量よりも大きく、各ドメインにつき約5MB保存できる。

操作性

キー:バリュー(文字列)のペアでデータが保存される。
文字列形式で保存されるため、オブジェクトなど他の形式を保存する場合はJSON形式に変換する必要がある。(詳しくは本記事後半にて)

Local Storage の基本コード

データを保存する
localStorage.setItem('キー', '値');

上の例ではlocalStorage.setItem('name', name);と記述し、nameというキー&フォームに入力した値をバリューとして保存しています。

データを取得する
const value = localStorage.getItem('キー');

上の例ではconst storedName = localStorage.getItem('name');と記述し、変数storedNameに保存した値を代入しています。

データを削除する
localStorage.removeItem('キー');

上の例ではlocalStorage.removeItem('name');と記述し、nameというキーに保存した値を削除しています。

また、Local Storageに保存されたすべてのデータを削除したい場合は以下コードを記述します。

localStorage.clear();

Local Storage の利用例

  • ユーザー設定の保存
    • ダークモードの設定や言語設定などを保存して、次回アクセス時に自動適用する。
  • フォームデータの保持
    • ユーザーがフォームに入力した内容を一時的に保存し、ページリロード時に復元する。
  • ゲームの状態管理
    • ゲームの進行状況やスコアなどを保存し、次回アクセス時に続きからプレイできるようにする。

Local Storage の注意点

  • セキュリティ上、パスワード、クレジットカード情報などは保存しないようにする。
  • 同じドメイン、ポート、プロトコルでのみデータが共有され、別のオリジンからはアクセスできない。
    • ブラウザにも依存している。例えばChromeで保存されたデータは、FirefoxやSafariからはアクセスできない。
  • データはブラウザを閉じても保持されるが、ブラウザのキャッシュをクリアすると消去される。
  • 保存されるデータはすべて文字列形式となり、オブジェクトなど他の形式を保存する場合はJSON.stringify()を使って文字列に変換し、さらに取得時にはJSON.parse()でオブジェクトに戻す必要がある。

JSON.stringify()JSON.parse()の使い方

JSON.stringify()JSON.parse()は、JavaScriptでオブジェクトをJSON形式の文字列に変換したり、その逆を行ったりする関数です。これらを使うことで、文字列しか保存できない Local Storage でもオブジェクトを保存・取得することができます。

JSON.stringify()オブジェクトの保存
const person = {
    name: "Ben",
    age: 30,
    hobbies: ["reading", "gaming"]
};

const jsonString = JSON.stringify(person);
console.log(jsonString);
// 出力: {"name":"Ben","age":30,"hobbies":["reading","gaming"]}

localStorage.setItem('person', JSON.stringify(person));
JSON.parse()オブジェクトの取得
const user1 = JSON.parse(localStorage.getItem('person'));
console.log(user1.name); // "Ben"

Local Storage の確認方法(Chromeの場合)

  1. ブラウザのデベロッパーツールを開く
    • F12キーを押すか、右クリックして「検証」を選択
  2. 「Application」タブを選択
  3. 左側のメニューから「Local Storage」 → 自分のサイトのドメインを選択すると、保存データの一覧が表示される
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次