はじめに
フロントエンド開発では、ユーザーのログイン状態を維持するためにトークンを保存する処理が必要になることがあります。
その中でよく使われるのが localStorage です。この記事では、localStorage の基本的な概要と、その使い方について整理しました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
書こうと思ったきっかけ
受講しているITスクールのハッカソンで開発しているアプリにおいて、トークンの管理方法について疑問を持ちました。特に、「localStorage とは何か？」という点が気になり、忘れないように記事にまとめておくことにしました。
内容
localStorageとは？
localStorage は、Webブラウザにデータを保存するための仕組みのひとつで、JavaScriptを使って操作します。特徴として、次のような点が挙げられます：
- ブラウザを閉じてもデータが保持される
- オリジン（スキーム・ドメイン・ポートの組み合わせ）ごとに分かれている
- 保存できるのは文字列のみ
- JavaScriptから簡単にアクセス・操作できる
参考文献
トークンの保存方法（例）
// トークンをlocalStorageに保存する例
localStorage.setItem("token", data.token);
上記のようにして、ユーザーがログインした際のトークンなどを保存できます。保存したデータは次のようにして取り出すことができます。
const token = localStorage.getItem("token");
削除する場合は以下のようにします：
localStorage.removeItem("token");
まとめ
localStorage は、クライアント側でデータを保存したいときに便利な仕組みです。特にユーザーの状態を保持したり、設定情報を保存したりする際によく使われます。
ただし、セキュリティ上の注意点もあるため、扱うデータの種類には十分な配慮が必要です。
アプリケーションの設計に合わせて、安全に活用していきたいです...！