プログラミング

【PR】を含みます。

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

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

JavaScriptでLocal Storageを操作する方法をまとめました。

Local Storageに配列や連想配列を保存する方法、保存した配列や連想配列を取得する方法も解説しています。

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

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

もくじCookieとは？Cookieを保存する方法保存する値にセミコロン(;)、カンマ(,)、空白、日本語が含まれる場合、URLエンコードが必要Cookieを削除(無効化)する方法過去の日付を指定して ...

Local Storageとは？

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

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

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

Local Storageの基本操作

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

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

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

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

データの保存

JavaSctipt
Copy
  1. localStorage.setItem('key', 'value');

データの取得

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

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

データの削除

JavaSctipt
Copy
  1. localStorage.removeItem('key');

全データのクリア

JavaSctipt
Copy
  1. localStorage.clear();

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

JavaSctipt
Copy
  1. // 保存したい連想配列
  2. const myObject = {
  3.   name: 'apple',
  4.   price: 100,
  5. };
  6.  
  7. // 連想配列をJSON文字列に変換
  8. const myObjectString = JSON.stringify(myObject);
  9.  
  10. // Local Storageに保存
  11. localStorage.setItem('myObjectKey', myObjectString);

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

JavaSctipt
Copy
  1. // LocalStorageからJSON文字列を取得
  2. const getMyObjectString = localStorage.getItem('myObjectKey');
  3.  
  4. if (getMyObjectString) {
  5.   // JSON文字列を連想配列に変換
  6.   const myObject = JSON.parse(myObjectString);
  7.  
  8.   console.log(myObject);
  9. } else {
  10.   console.log('キーが存在しません');
  11. }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ローカル ストレージ

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-