はじめに
こんにちは！エンジニア志望の学生です！
今日は開発期間2日間のハッカソンの時に、データベース周りとユーザ認証の実装に、途方に暮れていた時、localStrageに救われた時のことを書きます！
これはあくまでもハッカソンのように時間が限られた突貫作業で役立つTipsです。
実際の開発では、データベースを使用する方が安全で適切な場合が多いです。
また、ハッカソンでも高度な技術をアピールしたい場合には、この方法の使用はおすすめしません。
タイトルで釣ってすみません、、！！
localStrageについて
- JavaScriptを用いてユーザのローカル環境にデータを保存できる
- 半永久的なデータの保存が可能で、ページリロードをしたり、タブを閉じたりしてもデータが消えない
- キーと値のペアで保存、呼び出しが可能
➡ 「ユーザ特有のデータをデータベースから持ってくる」様な動作ができるようになる
注意点
- ストレージの上限が5MBである
- 削除しないとデータが残り続ける
- セキュリティが低く、機密情報の保持は非推奨
- stringのみ保存可能
保存 setItem()
- キーと値を渡す
- オブジェクトや配列を値として保存する時は、文字列に変換してから保存する
-
numberのみ自動でstringに変換される
-ストレージがいっぱいになると例外が発生するため、setItem()使用時には必ず例外を捕捉するようにする
setItem()
//基本的な実装
localStrage.setItem("key","value");
//数値の保存
localStrage.setItem("age",20);
//オブジェクトの保存
localStrage.setItem("obj",JSON.stringify(objectData));
取得 getItem()
- キーから値をstringで取得する
- 数値はnumberに自動変換される
- キーが存在しない場合は
nullを返す - オブジェクトとして扱いたい場合はparseする必要がある
getItem()
//基本的な実装
const value = localStrage.getItem("key");
//オブジェクトを取得
const dataStr = localStrage.getItem("key");//文字列として取得
const dataObj = JSON.parse(dataStr);//オブジェクトに変換
削除 removeItem()
- 指定されたキーを削除する
- キーが元々存在しない場合は何もしない
removeItem()
localStrage.removeItem("key")
初期化 clear()
- ローカルストレージ上の全てのキーを消去する
clear()
localStrage.clear()
↓ ブラウザのコンソールに直接入力することも可能
おまけ
MDNで紹介されていたメソッド、プロパティを紹介します。
n番目のキーの取得 key()
-
0始まりのインデックスを使い、n番目のキーを取得できる - 存在しない場合はnullを返す
必ずしも保存した順に並ぶわけではないため、使用は非推奨
key()
localStrage.key(5)
キーの数 lentgh
- ストレージ中に含まれるキーの数の合計を返す
length
localStrage.length
まとめ
チームのほとんどがnext.js初心者で、もちろんデータベースやユーザ認証なんてやったことないよ！みたいな状況だったので劇的に助けられました
SQLも覚えなきゃですね！！！
参考