【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】ローカルストレージ/セッションストレージにデータを追加・取得・削除する方法

本記事では、JavaScriptのローカルストレージ/セッションストレージにデータを追加・取得・削除する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/03/24 01:47時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

ローカルストレージ/セッションストレージにデータを追加

ローカルストレージ/セッションストレージにデータを追加する方法は以下のとおりです。

// ローカルストレージ
localStorage.setItem(key, value);
localStorage.key = value;
localStorage[key] = value;

// セッションストレージ
sessionStorage.setItem(key, value);
sessionStorage.key = value;
sessionStorage[key] = value;
setItemメソッドの使い方
  • localStorage:データを追加するストレージをローカルストレージに指定
  • sessionStorage:データを追加するストレージをセッションストレージに指定
  • key:値と紐づけるキーを指定
  • value:追加したい値を指定

ローカルストレージ/セッションストレージにはデータを追加する書き方が3つあり、setItemメソッド以外はオブジェクトに値を追加する時と同じ書き方です。

実際に、ローカルストレージ/セッションストレージにデータを追加してみましょう。

// ローカルストレージ
localStorage.setItem("food", "ramen");

// セッションストレージ
sessionStorage.setItem("food", "sushi");

下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。設定したkeyと値が各ストレージに分けられ保存されていることが確認できます。

ローカルストレージのkeyと値
ローカルストレージのkeyと値
セッションストレージのkeyと値
セッションストレージのkeyと値

ローカルストレージ/セッションストレージのデータを取得

ローカルストレージ/セッションストレージのデータを取得する方法は以下のとおりです。

// ローカルストレージ
localStorage.getItem(key);
localStorage.key;
localStorage[key];

// セッションストレージ
sessionStorage.getItem(key);
sessionStorage.key;
sessionStorage[key];
getItemメソッドの使い方
  • localStorage:取得したいデータがローカルストレージに保存されている場合に指定
  • sessionStorage:取得したいデータがセッションストレージに保存されている場合に指定
  • key:取得したい値と紐づいているキーを指定

データを追加する時と全く同じで書き方は3つあり、getItemメソッド以外はオブジェクトのプロパティ(key)に設定している値を参照する時と同じ書き方です。

先ほどローカルストレージ/セッションストレージに追加したデータを取得してみましょう。

// ローカルストレージ
console.log(localStorage.getItem("food")); // => ramen

// セッションストレージ
console.log(sessionStorage.getItem("food")); // => sushi

ローカルストレージ/セッションストレージのデータを削除

ローカルストレージ/セッションストレージのデータを削除する方法は以下のとおりです。

// ローカルストレージ
localStorage.removeItem(key);
delete localStorage.key;
delete localStorage[key];

// セッションストレージ
sessionStorage.removeItem(key);
delete sessionStorage.key;
delete sessionStorage[key];
removeItemメソッドの使い方
  • localStorage:削除したいデータがローカルストレージに保存されている場合に指定
  • sessionStorage:削除したいデータがセッションストレージに保存されている場合に指定
  • key:削除したい値と紐づいているキーを指定

removeItemメソッドの他にもdelete演算子で削除することも出来ます。

始めにローカルストレージ/セッションストレージに追加したデータを削除してみましょう。keyに指定した文字列は「food」です。

// ローカルストレージ
localStorage.removeItem("food");

// セッションストレージ
sessionStorage.removeItem("food");

下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。ローカルストレージ/セッションストレージに何もデータが入っていないことが確認できます。

ローカルストレージのkeyと値
ローカルストレージのkeyと値

全ての値を削除したい場合

ローカルストレージ/セッションストレージに保存されているデータを全て削除したい場合は、clearメソッドを使用します。

// ローカルストレージ
localStorage.clear();

// セッションストレージ
sessionStorage.clear();

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次