Zenn
📌

LocalStorageの使い方

2023/08/30に公開
JavaScript
#
localstorage
tech

LocalStorageの使い方

LocalStorageは、ブラウザにデータを保存するためのWebストレージAPIの1つです。LocalStorageは、セッションやクッキーとは異なり、データの保存期間が長く、ブラウザを閉じても保存されます。

LocalStorageを使用すると、JavaScriptを使用して簡単にデータを保存および取得できます。データは、キーと値のペアとして保存されます。キーは一意であり、値は文字列である必要がありますが、JSON.stringifyを使用してオブジェクトを文字列に変換し、JSON.parseを使用して文字列をオブジェクトに変換することができます。

LocalStorageに保存できるデータの量には制限がありますが、通常は5MB程度です。また、同じオリジンのページ間でのみアクセスできます。別のオリジンのページからアクセスしようとすると、セキュリティ制限によりアクセスできません。

LocalStorageの基本的な使い方

LocalStorageの基本的な使い方は、以下のようになります。

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

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

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

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

以上のように、LocalStorageを使用すると、ブラウザ上で簡単にデータを保存および取得できます。ただし、機密情報や重要な情報を保存する場合には、暗号化を行ったり、サーバー側でデータを管理するなど、セキュリティを考慮する必要があります。

使用例

LocalStorageは、ブラウザ上での簡単なデータ保存に便利です。以下は、LocalStorageを使用した使用例です。

  1. ログイン情報の保存
    ログイン情報をLocalStorageに保存することで、次回アクセス時にログイン情報を再入力する必要がなくなります。ただし、機密情報を保存する場合には、暗号化を行う必要があります。

  2. 言語設定の保存
    ユーザーの言語設定をLocalStorageに保存することで、次回アクセス時に自動的に言語が設定されます。

  3. ショッピングカートの保存
    ショッピングカートの情報をLocalStorageに保存することで、ユーザーがサイトを離れてもカートの中身が保持され、次回アクセス時に継続してショッピングを続けることができます。

  4. ゲームの進行状況の保存
    ゲームの進行状況をLocalStorageに保存することで、ユーザーがゲームを中断しても、再開時に続きからプレイすることができます。
    これらはLocalStorageを使用した一般的な例であり、他にも様々な使い方があります。しかし、LocalStorageはセキュリティ上の制限があるため、機密性の高い情報の保存には適していません。

コード例

以下は、LocalStorageを使用した基本的なコード例です。

  • ログイン情報の保存
// フォームから入力されたログイン情報を取得する
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// ログイン情報をLocalStorageに保存する
localStorage.setItem('username', username);
localStorage.setItem('password', password);
  • 言語設定の保存
// 言語設定を取得する
var language = document.getElementById('language').value;
// 言語設定をLocalStorageに保存する
localStorage.setItem('language', language);
  • ショッピングカートの保存
// ショッピングカートの情報を取得する
var cart = [{id: 1, name: '商品1', price: 100}, {id: 2, name: '商品2', price: 200}];
// ショッピングカートの情報をLocalStorageに保存する
localStorage.setItem('cart', JSON.stringify(cart));
  • ゲームの進行状況の保存
// ゲームの進行状況を取得する
var progress = {level: 5, score: 1000};
// ゲームの進行状況をLocalStorageに保存する
localStorage.setItem('progress', JSON.stringify(progress));

上記の例では、LocalStorageに値を保存する方法を示しています。データを取得する場合には、localStorage.getItem('キー')メソッドを使用します。データを削除する場合には、localStorage.removeItem('キー')メソッドを使用します。また、すべてのデータを削除する場合には、localStorage.clear()メソッドを使用します。

Discussion