【PR】を含みます。

フロントエンド

【JavaScript】Local Storageを操作(保存・取得・削除)する方法

JavaScript Local Storageを操作(保存・取得・削除)する方法

Webアプリやサイトを作成する際、「ユーザーの設定や一時的な情報をブラウザに保存したい」と思ったことはありませんか？

そんなときに便利なのがLocal Storage（ローカルストレージ）です。

Local StorageはJavaScriptから簡単に扱うことができ、データの保存・取得・削除の操作もシンプル。しかもブラウザを閉じてもデータが保持されるため、再訪した際にも情報を維持できます。

本記事では文字列や配列、オブジェクトの保存から取得・削除まで、はじめての方でも分かりやすいように実例とともに丁寧に解説します。

JavaScriptでCookieを操作する方法は以下の記事でまとめています。

あわせて読む
JavaScript Cookieを操作(保存・削除・取得・更新)する方法

【JavaScript】Cookieを操作(保存・削除・取得・更新)する方法

もくじCookieとは？Cookieの仕組みCookieのメリット・デメリットCookieと他のWebストレージの違いセキュリティ上の注意Cookieを保存する方法保存する値にセミコロン(;)、カンマ ...

Local Storageとは？

Local StorageはWebブラウザにテキスト情報を保存するための方法の一つで、JavaScriptで操作することが可能です。

主要ブラウザでは5MBまでデータを保存することができます。

保存したデータはユーザーがブラウザの機能を利用して削除するか、JavaScriptで明示的に削除しない限りブラウザに存在し続けます。

Local Storageの基本操作

localStorageに保存した値は、同一オリジンポリシー（Same-Origin Policy）によって保護されているため、以下の条件を満たす場合にのみアクセスすることが可能です。

  • 同じドメイン
    ※example.comとsub.example.comは異なるドメインと見なされます

  • 同じプロトコル
    ※HTTPとHTTPSは異なります

  • 同じポート番号
    ※通常のウェブサイトではポート番号は指定しませんが、指定する場合は同じである必要があります

データの保存

JavaScript
Copy
localStorage.setItem('key', 'value');

データの取得

keyがLocal Storageに存在しない場合、nullが返されます。

JavaScript
Copy
let value = localStorage.getItem('key');

データの削除

JavaScript
Copy
localStorage.removeItem('key');

全データのクリア

JavaScript
Copy
localStorage.clear();

Local Storageに配列・連想配列を保存

JavaScript
Copy
// 保存したい連想配列
const myObject = {
  name: 'apple',
  price: 100,
};
// 連想配列をJSON文字列に変換
const myObjectString = JSON.stringify(myObject);
// Local Storageに保存
localStorage.setItem('myObjectKey', myObjectString);

Local Storageから配列・連想配列を取得

JavaScript
Copy
// LocalStorageからJSON文字列を取得
const getMyObjectString = localStorage.getItem('myObjectKey');
if (getMyObjectString) {
  // JSON文字列を連想配列に変換
  const myObject = JSON.parse(getMyObjectString);
  console.log(myObject);
} else {
  console.log('キーが存在しません');
}

Local Storageに保存されている全てのキーを取得

JavaScript
Copy
const keys = [];
// 各インデックスに対してキーを取得し、配列に追加
for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  keys.push(key);
}

Chromeのデベロッパーツール(検証ツール)でLocal Storageの内容を確認する方法

以下の①～⑦の手順で、LocalStorageの情報を確認することができます。

  1. 画面右上の「︙」をクリック

    画面右上の「︙」をクリック説明画像

  2. 「その他のツール」にマウスカーソルを合わせる

    「その他のツール」にマウスカーソルを合わせる説明画像

  3. 「デベロッパー ツール」をクリック

    「デベロッパー ツール」をクリック説明画像

  4. 「アプリケーション」をクリック

    「アプリケーション」をクリック説明画像

  5. 「ローカル ストレージ」をクリック

    「ローカル ストレージ」をクリック説明画像

  6. 「対象のドメイン」をクリック

    「対象のドメイン」をクリック説明画像

  7. 以下の画像⑦のようにローカル ストレージの情報が表示されます

    ローカル ストレージ説明画像

まとめ

  • Local StorageはWebブラウザにテキストデータを保存できる仕組みで、簡単なJavaScriptのメソッドで利用できます。
  • 基本の操作方法は以下の通りです。
    • 値の保存：localStorage.setItem('key', 'value');
    • 値の取得：localStorage.getItem('key');
    • 値の削除：localStorage.removeItem('key');
    • 全削除：localStorage.clear();
  • 配列や連想配列もJSON.stringifyで文字列化して保存・復元可能です。
  • 現在保存されている全てのキーは、localStorage.key(i)をfor文で回して取得できます。
  • 主要ブラウザでは約5MBまで保存可能ですが、同一オリジンポリシーに注意してください。
  • ChromeのデベロッパーツールでLocal Storageの内容確認できるので、開発・デバッグに役立てましょう。

JavaScriptでCookieを操作する方法は以下の記事でまとめています。

あわせて読む
JavaScript Cookieを操作(保存・削除・取得・更新)する方法

【JavaScript】Cookieを操作(保存・削除・取得・更新)する方法

もくじCookieとは？Cookieの仕組みCookieのメリット・デメリットCookieと他のWebストレージの違いセキュリティ上の注意Cookieを保存する方法保存する値にセミコロン(;)、カンマ ...

-フロントエンド
-