ローカルストレージ

よみかた：ろーかるすとれーじ

意味

ブラウザに小さなデータを保存しておける場所のこと。
JavaScriptからアクセスできて、ページを閉じても情報が残るのが特徴。

ポイント

  • ブラウザ内に保存される（サーバーには送られない）
  • localStorage.setItem() と getItem() で読み書きできる
  • 文字列しか保存できないため、オブジェクトを保存するにはJSON形式への変換が必須

体験してみよう

ユーザー情報を入力して保存すると、ページを更新してもデータが残ります。これは裏側で入力値をJSONという形式の文字列に変換して、ローカルストレージに保存しているためです。

①ユーザー情報を入力して保存してみよう

②ページを更新してみよう

ユーザー情報を入力してください。

保存されたデータ: なし

コードを書いて実践してみよう

「体験してみよう」の裏側では、このようにJSONを利用してオブジェクトを文字列に変換しています。JSON.stringify()で保存し、JSON.parse()で元に戻すのがポイントです。

サンプルコードを見る (JavaScript) 
// ユーザーオブジェクトを作成
const user = { name: '山田', age: 30 };

// オブジェクトをJSON文字列に変換して保存
localStorage.setItem('userData', JSON.stringify(user));

// JSON文字列を取得してオブジェクトに変換
const jsonData = localStorage.getItem('userData');
const savedUser = JSON.parse(jsonData);

console.log(savedUser.name); // "山田"
HTML/CSS/JS 統合版テンプレート

このページの完全なコードです。以下の内容をコピーしてindex.htmlなどの名前で保存すると、ご自身のPCやブラウザで直接開いて確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ローカルストレージ - 実践型IT用語辞典</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    /* styles.cssの内容 */
    body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.8; color: #333; background-color: #f4f1e2; }
    .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 50px; }
    /* ... 他のスタイル ... */
  </style>
</head>
<body>
  <div class="container">
    <!-- ページのHTML構造 -->
  </div>
  <script>
    const nameInput = document.getElementById('name-input');
    const ageInput = document.getElementById('age-input');
    const savedDataSpan = document.getElementById('saved-data');

    function saveData() {
      const user = { name: nameInput.value, age: ageInput.value };
      localStorage.setItem('userData', JSON.stringify(user));
      displayData();
    }

    function displayData() {
      const jsonData = localStorage.getItem('userData');
      if (jsonData) {
        const user = JSON.parse(jsonData);
        savedDataSpan.textContent = `名前: ${user.name}, 年齢: ${user.age}`;
      } else {
        savedDataSpan.textContent = 'なし';
      }
    }

    function clearData() {
      localStorage.removeItem('userData');
      displayData();
    }

    window.onload = displayData;
  </script>
</body>
</html>

関連用語・比較

用語名 特徴
localStorage ページを閉じても残る、永続的
sessionStorage 同じタブ内だけ。閉じると消える
クッキー サーバーにも送れる、小さい、やや古い