はじめに
Webアプリを作るときに、「ページをリロードしてもデータを保持したい」「一時的にユーザーの入力を記憶したい」等を実現するためにStorage機能が存在します。
今回は、localStorage と sessionStorageについてJavaScriptから簡単に扱う方法についてLogとして記載していきたいと思います。
他にも、体系的にJavaScriptを学びたい方には以下の教材がおすすめです：
👉1冊ですべて身につくJavaScript入門講座（Amason）
👉 スラスラわかるJavaScript（Amazon）
Storageとは
「Storage」とは、ブラウザにデータを保存できる仕組みのことです。JavaScriptで直接操作でき、サーバー通信なしで情報を保持できます。
| 種類 | 詳細 |
| localStorage | ブラウザを閉じてもデータが残る「長期保存用ストレージ」 |
| sessionStorage | ブラウザやタブを閉じるとデータが消える「一時保存用ストレージ」 |
localStorageの使い方
ブラウザを閉じてもデータを保存しておくことができます。
データの保存
"username" というキーで "Mori" という文字列が保存されます。
localStorage.setItem("username", "Mori");
データの取得
保存した値を取り出すときは getItem() を使います。
const name = localStorage.getItem("username");
console.log(name);
データの削除
指定したキーのデータだけ削除します。
localStorage.removeItem("username");
全データ削除
保存されているデータをすべて削除します。
localStorage.clear();
sessionStorageの使い方
sessionStorageの使い方は localStorageとほとんど同じですが、データがブラウザやタブを閉じた時点で消えるという点が異なります。
データの保存
sessionStorage.setItem("username", "Mori");
データの取得
const name = sessionStorage.getItem("username");
console.log(name);
データの削除
sessionStorage.removeItem("username");
保存できるデータの型について
Storageに保存できるのは文字列だけです。配列等をそのまま保存すると「Object」となってしまうため、JSONに変換してから保存すれば、複雑なデータも簡単に扱えます。
例
const user = { name: "Mori", age: 30 };
// JSON文字列に変換して保存
localStorage.setItem("user", JSON.stringify(user));
// 取り出してオブジェクトに戻す
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント