HTML、クッキー、ローカルストレージにおける「localStorage」、「sessionStorage」、「セッション」、「クッキー」の違いを徹底解説！

2024-04-02

HTML、クッキー、ローカルストレージにおける「localStorage」、「sessionStorage」、「セッション」、「クッキー」の違い

Webサイトは、ユーザーの情報を保存するために様々な技術を使用します。代表的なものは、「localStorage」、「sessionStorage」、「セッション」、「クッキー」です。これらの技術はそれぞれ異なる機能を持ち、使い分けることが重要です。

比較表

技術	保存期間	保存場所	使用例
localStorage	永続的に保存	ブラウザのローカルストレージ	ユーザー設定、テーマ、ログイン情報など
sessionStorage	ブラウザセッション中のみ保存	ブラウザのセッションストレージ	買い物かごの中身、一時的なデータなど
セッション	サーバ側	サーバのメモリ	ユーザー認証情報など
クッキー	永続的またはセッション中のみ	クライアント側のブラウザ	ログイン情報、トラッキング情報など

詳細解説

localStorage

ブラウザのローカルストレージにデータを保存します。
データは永続的に保存され、ブラウザを閉じて再度開いても消えません。
容量制限はありますが、クッキーよりも多くのデータを保存できます。
ユーザー設定、テーマ、ログイン情報など、永続的に保存したいデータに適しています。

sessionStorage

データはブラウザセッション中のみ保存され、ブラウザを閉じると消えます。
localStorageよりも容量は小さいです。
買い物かごの中身、一時的なデータなど、セッション中にのみ必要なデータに適しています。

セッション

サーバ側でデータを保存します。
セッションがタイムアウトするとデータは消えます。

クッキー

クライアント側のブラウザにデータを保存します。
データは永続的またはセッション中のみ保存できます。
サーバとの通信時に送信されます。
ログイン情報、トラッキング情報など、サーバと共有したいデータに適しています。

使い分け

永続的に保存したいデータには localStorage を使用します。
セッション中にのみ必要なデータには sessionStorage または セッション を使用します。
サーバと共有したいデータには クッキー を使用します。

注意点

localStorage と sessionStorage は、ブラウザごとに保存されます。
セッション は、サーバごとに保存されます。
クッキー は、複数のドメインで共有できます。

補足

上記は基本的な説明であり、詳細については各技術のドキュメントを参照してください。
これらの技術は組み合わせて使用することもできます。

日本語での解説

上記は、"What is the difference between localStorage, sessionStorage, session and cookies ?" の日本語での解説です。

用語

HTML: Webページの記述言語
クッキー: Webサイトがユーザーのブラウザに保存する小さなテキストファイル
ローカルストレージ: ブラウザがユーザーのコンピュータに保存するデータ

プログラミング

上記の技術は、JavaScriptを使用して操作できます。

例

// localStorageにデータを設定
localStorage.setItem('key', 'value');

// localStorageからデータを取得
const value = localStorage.getItem('key');

// localStorageからデータを削除
localStorage.removeItem('key');

localStorage

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>localStorageサンプル</title>
</head>
<body>
  <p>名前:</p>
  <input type="text" id="name">
  <button id="set-btn">保存</button>
  <button id="get-btn">取得</button>
  <button id="remove-btn">削除</button>
  <p id="result"></p>

  <script>
    const nameInput = document.getElementById('name');
    const setBtn = document.getElementById('set-btn');
    const getBtn = document.getElementById('get-btn');
    const removeBtn = document.getElementById('remove-btn');
    const result = document.getElementById('result');

    setBtn.addEventListener('click', () => {
      const name = nameInput.value;
      localStorage.setItem('name', name);
      result.textContent = '名前を保存しました';
    });

    getBtn.addEventListener('click', () => {
      const name = localStorage.getItem('name');
      result.textContent = `名前: ${name}`;
    });

    removeBtn.addEventListener('click', () => {
      localStorage.removeItem('name');
      result.textContent = '名前を削除しました';
    });
  </script>
</body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sessionStorageサンプル</title>
</head>
<body>
  <p>買い物かご:</p>
  <input type="text" id="item">
  <button id="add-btn">追加</button>
  <button id="get-btn">取得</button>
  <button id="remove-btn">削除</button>
  <p id="result"></p>

  <script>
    const itemInput = document.getElementById('item');
    const addBtn = document.getElementById('add-btn');
    const getBtn = document.getElementById('get-btn');
    const removeBtn = document.getElementById('remove-btn');
    const result = document.getElementById('result');

    addBtn.addEventListener('click', () => {
      const item = itemInput.value;
      if (!sessionStorage.getItem('items')) {
        sessionStorage.setItem('items', []);
      }
      const items = JSON.parse(sessionStorage.getItem('items'));
      items.push(item);
      sessionStorage.setItem('items', JSON.stringify(items));
      result.textContent = '商品を追加しました';
    });

    getBtn.addEventListener('click', () => {
      if (!sessionStorage.getItem('items')) {
        result.textContent = '買い物かごは空です';
        return;
      }
      const items = JSON.parse(sessionStorage.getItem('items'));
      result.textContent = `買い物かご: ${items.join(', ')}`;
    });

    removeBtn.addEventListener('click', () => {
      sessionStorage.removeItem('items');
      result.textContent = '買い物かごを空にしました';
    });
  </script>
</body>
</html>

セッション

<?php
session_start();

// セッションにデータを設定
$_SESSION['name'] = 'John Doe';

// セッションからデータを取得
$name = $_SESSION['name'];

// セッションからデータを削除
unset($_SESSION['name']);
?>

クッキー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クッキーサンプル</title>
</head>
<body>
  <p>名前:</p>
  <input type="text" id="name">
  <button id="set-btn">保存</button>
  <button id="get-btn">取得</button>
  <button id="remove-btn">削除</button>
  <p id="result"></p>

  <script>
    const nameInput = document.getElementById('name');
    const setBtn = document.getElementById('set-btn');
    const getBtn = document.getElementById('get-btn');
    const removeBtn = document