JavaScript

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

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

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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

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

// ローカルストレージ
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アクセスランキング にほんブログ村