初学者のため、学習した内容をまとめていく。
今回は、Storageオブジェクトについて
Storageオブジェクト
JavaScriptではスクリプトからコンピューターに勝手にアクセスできない仕組みとなっている。ブラウザにアクセスするとPC内のファイルが勝手に書き換えられるわけにはいけないため。
その例外としてクッキーと言う仕組みがあるが、制限もあり使いにくい。
その代替手段としてWeb Storageと言うものがある。これはブラウザ内蔵のデータストアでkeyとvalueの値の組み合わせでデータを保存する。
クッキーとストレージの違い
| 項目 | ストレージ | クッキー |
|---|---|---|
| データサイズの上限 | 大きい（５Mb) | 小さい（４KB) |
| データの有効期限 | なし | あり |
| データ通信 | 発生しない | リクエストの都度、サーバーにも送信 |
そして、Storageには２種類あり、ローカルストレージとセッションストレージがある。
２つの違い
| ストレージ | 違い |
|---|---|
| ローカルストレージ | ウィンド/タブをまたいでデータの共有が可能。ブラウザーを閉じてもデータは維持される |
| セッションストレージ | 現在のセッション（ブラウザが開いている間）だけ保持される。ウィンド/タブをまたげない・データを共有することもできない |
用途で使い分けるべきだが、ローカルストレージは意図的に削除しないといけない、複数のアプリを使うと変数名が衝突しやすい、と言う問題もあり、基本はセッションストレージを使う方が良い。
データのセット
２つの使い方はプロパティが違うだけなので、必要なプロパティを当ててもらうと良い。
let storage = localStorage //sessionStorage
//変数に定義していると後々ストレージを変更することになっても変更箇所が少なくて良い
storage.setItem('key','value');
値のセットの仕方は複数ある。必要に応じて使い分ける。
開発者ツールでストレージの内容も確認することができる。
データのセットの仕方
| 記法 | 構文 |
|---|---|
| プロパティ構文 | storage.キー名 = value |
| ブラケット構文 | storage['キー名'] = value |
| メソッド構文（取得） | storage.getItem('キー名') |
| メソッド構文（設定） | storage.setItem('キー名','value') |
データの削除
storage.removeItem('キー名');
delete storage.キー名;
delete storage['キー名'];
storage.clear(); //無条件に全てのデータを削除
ストレージにオブジェクトを保存・取得
ストレージへの保存は文字列となる。オブジェクトを保存してもエラーにはならないが、復元不可能な文字列となる。
そのため、オブジェクトを保存する場合は、復元可能な文字列に変換しないといけない。
そのために
| 内容 | 構文 |
|---|---|
| 復元可能な文字列変換 | JSON.stringify(変換するオブジェクト) |
| 文字列からオブジェクトへ変換 | JSON.parse(元に戻す文字列) |
のメソッドを使う。
例
let storage = localStorage;
let test = { name:'test', point: 80}
storage.setItem('satou', JSON.stringify(test)); //値のセット
let answer = JSON.parse(storage.getItem('satou')); //値の取り出し
なぜ、オブジェクトで保存？
ローカルストレージはオリジン単位でデータを保存するため、複数アプリが起動すると名前の衝突が起きる危険がある。そのため、アプリごとにオブジェクトとして保存する方がいい。
ストレージはログイン状態の保存など使うことが多いと思うので、気をつけて使っていきたい。