━目次━
システムを構築していると、ローカルストレージ(localStorage)やセッションストレージ(sessionStorage)を使用することがあると思います。
ある時、ローカルストレージに保存されたJSONの中から、特定の要素のみ削除する必要がありちょっと時間を喰ったので載せておきます。
JavaScriptでストレージを操作する基本コマンド
まず、JavaScriptからストレージオブジェクトを操作する基本的なコマンドには以下のようなものがあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* ローカルストレージの例。セッションストレージの場合はsessionStorage */ // データの設定 // キー名をkey1として値100を保存する例 localStorage.setItem('key1', 100); // データの取得 // キー名を指定して値を取得 let item = localStorage.getItem('key1'); console.log(item); // 100 // データの削除 // 全てのデータを削除 localStorage.clear(); // データの削除 // キー名を指定して削除 localStorage.removeItem('key1'); |
大体上記のコマンドを覚えておけば事足ります。
複数のデータをまとめてストレージに保存する場合
ただ、実際には1つのキーに1つの値しか保存しないような設計はあまりしません。
キーが多くなって管理するのも大変ですし、画面が違うと違うキー名にしないといけないので煩雑です。
そういう場合は、JSONデータをキー名に割り当てて保存します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// オブジェクトの定義 let obj = { name: 'じゃけぇ', age: 100 } // JSONデータに変換 let jsonObj = JSON.stringify(obj); // キー名を指定して保存 localStorage.setItem('human', jsonObj); |
これで「human」という名前で、ローカルストレージにJSONデータを格納することができました。
JSONの中のある値だけストレージから削除したい場合
さて本題ですが、上記の例でJSONデータの中に保存した「age」だけ削除したい場合どうするでしょうか？
考える人 そりゃあお前、最初にやったremoveItemを使うじゃろ
じゃけぇ ほんとにそうかな？
|
1 2 3 |
// キー名を指定して削除 localStorage.removeItem('human'); |
↑こうしてしまうと全部まとめて削除されてしまうのでアウトです。
かといって、
|
1 2 |
// オブジェクトっぽくキー名を指定して削除 localStorage.removeItem('human.age'); |
こんなことはできません。
ではどうするかと言うと、
１回データを取り出して、オブジェクトに変換したあと特定の要素を削除して、もう１回保存し直す
ということになります。
コードで見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// キー名を指定して取得 // JSON⇒オブジェクトに変換するように！ let storageItem = JSON.parse(localStorage.getItem('human')); // オブジェクトからageプロパティを削除して再度ストレージに設定する // 存在チェック等は仕様に応じて if (storageItem) { // 「delete オブジェクト名.プロパティ名」で特定のプロパティを削除 delete storageItem.age; // JSONに変換し直してローカルストレージに再設定 localStorage.setItem('human', JSON.stringify(storageItem)); } |
これでローカルストレージのキー名「human」の中に保存されているのは「”name”:”じゃけぇ”」のみとなりました
さいごに
管理が面倒なので私はあまりストレージを乱用するのは好きじゃないですが、UXを考えるとストレージが適切な場合もあるので扱えるようにしとかないとですね。
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
