【JavaScript】localStorageとsessionStrorageとは何か？違いを解説｜setItem, getItem, removeItem, clear

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。
[PR]

JavaScriptにはブラウザにデータを保存することができる便利な機能があります。

それが、localStorage と sessionStorage です。

ここでは、localStorage と sessionStorageの違いや、どっちを使うべきかなどを解説しています。


localStorageとsessionStrorageの違い

localStorageとsessionStrorageはウェブストレージAPIの一部で、どちらもブラウザにデータを保存することができます。

データの保存はKV（キー、バリュー）で行います。

localStorageとsessionStrorageの違いは「保存期間」と「スコープ（適用範囲）」です。

特性localStoragesessionStorage
永続性永続的（手動で削除されるまで保持）一時的（セッションが終了すると削除）
スコープ同じオリジン内のすべてのタブ/ウィンドウで共有同じオリジン内の同一タブ/ウィンドウでのみ使用
容量通常、ドメインごとに約5MB通常、ドメインごとに約5MB
用途長期間保持したいデータ一時的なデータ


以下でそれぞれの詳細を解説していきます。


localStorage

localStorageの特徴

「localStorage」は、保存したデータを削除されるまで永続的に保存することができます。このため、ブラウザを閉じてもデータは保持されます。

スコープ（対象範囲）は広く、同じオリジン（プロトコル、ホスト名、ポート）が共有するすべてのタブやウィンドウでアクセスできます。

このため、ユーザーの設定や状態情報など、長期間保持したいデータに使用します。


メソッド一覧

「localStorage」にデータを保存、取得、削除をするにはメソッドを使用します。

メソッドは4つあります。「setItem」「getItem」「removeItem」「clear」

// データの保存
localStorage.setItem('キー名', '値');

// データの取得
let var = localStorage.getItem('キー名');

// データの削除
localStorage.removeItem('キー名');

// すべてのデータの削除
localStorage.clear();

（※メソッドはlocalStorageとsessionStrorageどちらも同じです）


localStorageの実例（背景色のカスタムと保存）

localStrageを使うと、ユーザーが選択した背景色を保存しておくことができます。

localStorageに保存するので、再度ページを読みこんだときも、保存した色が残ります。

See the Pen localStrage（背景色のカスタムと保存） by pro gurashi (@pro-gurashi) on CodePen.


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景色のカスタマイズ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>背景色を選択してください</h1>
    <input type="color" id="colorPicker">
    <button id="saveButton">色を保存</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

<input type="color" id="colorPicker">でカラーピッカーを埋め込んでいます。



CSS (styles.css)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  transition: background-color 0.5s;
}

.container {
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

#colorPicker {
  margin-bottom: 20px;
}

flexを使ってページ全体を中央揃えにしています。

背景色の変更をスムーズにするため、transitionプロパティで0.5秒かけて変化させるようにしています。


JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
  const colorPicker = document.getElementById('colorPicker');
  const saveButton = document.getElementById('saveButton');

  // ページロード時に保存された背景色を適用
  const savedColor = localStorage.getItem('bgColor');
  if (savedColor) {
    document.body.style.backgroundColor = savedColor;
    colorPicker.value = savedColor;
  }

  // ボタンのクリックイベントで色を保存
  saveButton.addEventListener('click', () => {
    const selectedColor = colorPicker.value;
    document.body.style.backgroundColor = selectedColor;
    localStorage.setItem('bgColor', selectedColor);
    alert('背景色が保存されました！');
  });
});

DOMContentLoaded イベントで、ページのDOMが完全に読み込まれた後にスクリプトを実行するようにしています。

ページが読み込まれたときに、localStorage から保存された背景色を取得し、背景色を設定します。

ユーザーがカラーピッカーで色を選び、「色を保存」ボタンをクリックすると、その色が localStorage に保存され、ページの背景色が即座に変更されます。



sessionStorage

sessionStorageの特徴

「sessionStorage」に保存されたデータは、ブラウザセッションが終了するまで保持されます。ブラウザタブやウィンドウを閉じるとデータは削除されます。

スコープ（対象範囲）は狭く、同じオリジン内の同一タブまたはウィンドウ内でのみアクセスできます。他のタブやウィンドウとは共有されません。

フォームの入力内容やユーザーセッション情報など、一時的な情報を保存するときに使用します。


メソッド一覧

「sessionStorage」にデータを保存、取得、削除をするにはメソッドを使用します。

メソッドは4つあります。「setItem」「getItem」「removeItem」「clear」

// データの保存
sessionStorage.setItem('キー名', '値');

// データの取得
let var = localStorage.getItem('キー名');

// データの削除
sessionStorage.removeItem('キー名');

// すべてのデータの削除
sessionStorage.clear();

（※メソッドはlocalStorageとsessionStrorageどちらも同じです）


sessionStorageの実例（訪問回数カウント）

sessionStorageを使うと、訪問回数をカウントする機能を実装することができます。

ユーザーがページをリロードするたびに訪問回数が増加し、セッションが終了するまで保持されます。タブを閉じるとカウントがリセットされるため、次回開くと再度カウントが始まります。

（※リロード（location.reload）を実行するためcodepenで警告が表示されますが特に問題ありません。右下の0.5xをクリックすると見やすくなります）

See the Pen sessionStrage（訪問回数カウント） by pro gurashi (@pro-gurashi) on CodePen.


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>訪問回数カウンター</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="counter-container">
    <h1>訪問回数カウンター</h1>
    <p id="visit-count"></p>
    <button id="reload-button">ページリロード</button>
    <button id="reset-button">カウントリセット</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

ページのリロードと、セッション情報をクリアするためのボタンを設置しています。



CSS (styles.css)

/* styles.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.counter-container {
  text-align: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 20px;
}

#visit-count {
  font-size: 24px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #0056b3;
}

flexを使ってページ全体を中央揃えにしています。


JavaScript (script.js)

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const visitCountElement = document.getElementById('visit-count');
  const reloadButton = document.getElementById('reload-button');
  const resetButton = document.getElementById('reset-button');

  // 現在の訪問回数を取得
  let visitCount = sessionStorage.getItem('visitCount');

  // 訪問回数が保存されていない場合、0に初期化
  if (visitCount === null) {
    visitCount = 0;
  }

  // 訪問回数を増加
  visitCount++;
  sessionStorage.setItem('visitCount', visitCount);

  // 訪問回数を表示
  visitCountElement.textContent = `このセッションでの訪問回数: ${visitCount}`;

  // リロードボタンのクリックイベント
  reloadButton.addEventListener('click', () => {
    location.reload();
  });

  // リセットボタンのクリックイベント
  resetButton.addEventListener('click', () => {
    sessionStorage.removeItem('visitCount');
    visitCountElement.textContent = 'カウントがリセットされました。ページを再読み込みしてください。';
  });
});

ページの読み込みが完了すると、現在の訪問回数を sessionStorage から取得します。sessionStorage.getItem('visitCount');

その度に、訪問回数を1増加させて sessionStorage に保存します。sessionStorage.setItem('visitCount', visitCount);

リセットボタンをクリックすると、sessionStorage から訪問回数を削除し、リセットメッセージを表示します。sessionStorage.removeItem('visitCount');



タイトルとURLをコピーしました