本記事では、JavaScriptのローカルストレージ/セッションストレージにデータを追加・取得・削除する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
ローカルストレージ/セッションストレージにデータを追加
ローカルストレージ/セッションストレージにデータを追加する方法は以下のとおりです。
// ローカルストレージ
localStorage.setItem(key, value);
localStorage.key = value;
localStorage[key] = value;
// セッションストレージ
sessionStorage.setItem(key, value);
sessionStorage.key = value;
sessionStorage[key] = value;- localStorage：データを追加するストレージをローカルストレージに指定
- sessionStorage：データを追加するストレージをセッションストレージに指定
- key：値と紐づけるキーを指定
- value：追加したい値を指定
ローカルストレージ/セッションストレージにはデータを追加する書き方が3つあり、setItemメソッド以外はオブジェクトに値を追加する時と同じ書き方です。
実際に、ローカルストレージ/セッションストレージにデータを追加してみましょう。
// ローカルストレージ
localStorage.setItem("food", "ramen");
// セッションストレージ
sessionStorage.setItem("food", "sushi");下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。設定したkeyと値が各ストレージに分けられ保存されていることが確認できます。
ローカルストレージ/セッションストレージのデータを取得
ローカルストレージ/セッションストレージのデータを取得する方法は以下のとおりです。
// ローカルストレージ
localStorage.getItem(key);
localStorage.key;
localStorage[key];
// セッションストレージ
sessionStorage.getItem(key);
sessionStorage.key;
sessionStorage[key];- 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];- localStorage：削除したいデータがローカルストレージに保存されている場合に指定
- sessionStorage：削除したいデータがセッションストレージに保存されている場合に指定
- key：削除したい値と紐づいているキーを指定
removeItemメソッドの他にもdelete演算子で削除することも出来ます。
始めにローカルストレージ/セッションストレージに追加したデータを削除してみましょう。keyに指定した文字列は「food」です。
// ローカルストレージ
localStorage.removeItem("food");
// セッションストレージ
sessionStorage.removeItem("food");下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。ローカルストレージ/セッションストレージに何もデータが入っていないことが確認できます。
全ての値を削除したい場合
ローカルストレージ/セッションストレージに保存されているデータを全て削除したい場合は、clearメソッドを使用します。
// ローカルストレージ
localStorage.clear();
// セッションストレージ
sessionStorage.clear();
