SessionStorageとLocalStorageとCookiesの違いと利用例

ウェブブラウザのクライアント側には、データを保存するためにSessionStorage、LocalStorage、そしてCookiesという3つの主要な仕組みがあります。

1. SessionStorageとは？

SessionStorageは、ウェブブラウザのタブが開かれている間だけデータを保存する仕組みです。タブを閉じると保存されたデータは消去されます。また、同じタブ内であればデータを共有することができますが、別のタブではデータが分離されます。

具体的な利用例：

// データの保存
sessionStorage.setItem('username', 'John');

// データの取得
const username = sessionStorage.getItem('username');

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

2. LocalStorageとは？

LocalStorageは、ウェブブラウザのタブを閉じてもデータを保存し続ける仕組みです。永続的なデータの保存に適していますが、セッションとは関連付けられないため、異なるタブ間でデータが共有されます。

具体的な利用例：

// データの保存
localStorage.setItem('language', 'JavaScript');

// データの取得
const language = localStorage.getItem('language');

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

3. Cookiesとは？

Cookiesは、ウェブブラウザに保存される小さなテキストデータです。有効期限を設定することができ、指定した有効期限までデータが保持されます。セッションの間だけでなく、指定した期間だけデータを共有する場合に使用されます。

具体的な利用例：

// データの保存（有効期限を7日に設定）
document.cookie = 'favoriteColor=blue; expires=Thu, 01 Jan 2024 00:00:00 UTC; path=/';

// データの取得
const cookies = document.cookie;

4. 選択のガイドライン

どの方法を使用するかは、具体的な要件によります。

• SessionStorage：一時的なデータの保存に適しており、ページ間での情報の共有が不要な場合に選択されます。
• LocalStorage：永続的なデータの保存が必要で、異なるタブ間でデータの共有が必要な場合に選択されます。
• Cookies：有効期限を設定して永続的なデータの保存と、異なるセッションや異なるドメイン間でデータの共有が必要な場合に選択されます。

5. 利用例：ショッピングカート

これらのデータ保存方法を使って、ショッピングカートの情報を保存する具体的な例を考えてみましょう。

// カートに商品を追加
function addToCart(productId, quantity) {
  const cart = JSON.parse(localStorage.getItem('cart')) || {};
  cart[productId] = (cart[productId] || 0) + quantity;
  localStorage.setItem('cart', JSON.stringify(cart));
}

// カートの中身を取得
function getCartContents() {
  return JSON.parse(localStorage.getItem('cart')) || {};
}

// カートから商品を削除
function removeFromCart(productId) {
  const cart = JSON.parse(localStorage.getItem('cart')) || {};
  delete cart[productId];
  localStorage.setItem('cart', JSON.stringify(cart));
}

この例では、LocalStorageを使用してカートの情報を保存します。カートに商品を追加、削除する関数を用意し、getCartContents関数でカートの中身を取得できるようにしています。これにより、ユーザーが異なるページに遷移してもカートの中身が保持されます。

Chromeで確認するには？？

Google ChromeでSessionStorage、LocalStorage、およびCookiesに保存されたデータを確認する方法

1. SessionStorageの確認：

• 開発者ツールを開き、「Application」タブを選択します。
• 左側のパネルで、「Session Storage」を選択します。保存されているSessionStorageのキーと値が表示されます。

2. LocalStorageの確認：

• 開発者ツールを開き、「Application」タブを選択します。
• 左側のパネルで、「Local Storage」を選択します。LocalStorageに保存されたキーと値が表示されます。

3. Cookiesの確認：

• 開発者ツールを開き、「Application」タブを選択します。
• 左側のパネルで、「Cookies」を選択します。保存されているCookiesの情報が表示されます。

これらの手順により、Google Chromeの開発者ツールを使用して、SessionStorage、LocalStorage、およびCookiesに保存されているデータを簡単に確認できます。データの内容や保存されているキーと値を把握することで、ウェブアプリケーションのデバッグや動作確認がスムーズに行えるでしょう。

まとめ

本記事では、SessionStorage、LocalStorage、そしてCookiesの違いと具体的な利用例について解説しました。それぞれの特性を理解し、適切なデータ保存方法を選択することで、ウェブアプリケーションの機能を強化し、ユーザーエクスペリエンスを向上させることができます。データの保存については、プロジェクトの要件に合わせて適切な方法を選択し、効果的に活用してください。

参考文献

• Web Storage
  https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

• Cookie
  https://developer.mozilla.org/ja/docs/Glossary/Cookie