目的別厳選記事絶対的におすすめする神フリーランスエージェントランキング【2018年最新版】-エージェントで年収は変わる!情報処理で留年しかけてした男が入社3年未満で独立するまでプロフィール-じゃけぇ-





システムを構築していると、ローカルストレージ(localStorage)セッションストレージ(sessionStorage)を使用することがあると思います。


ある時、ローカルストレージに保存されたJSONの中から、特定の要素のみ削除する必要がありちょっと時間を喰ったので載せておきます。

JavaScriptでストレージを操作する基本コマンド

まず、JavaScriptからストレージオブジェクトを操作する基本的なコマンドには以下のようなものがあります。


大体上記のコマンドを覚えておけば事足ります。

複数のデータをまとめてストレージに保存する場合

ただ、実際には1つのキーに1つの値しか保存しないような設計はあまりしません。

キーが多くなって管理するのも大変ですし、画面が違うと違うキー名にしないといけないので煩雑です。

そういう場合は、JSONデータをキー名に割り当てて保存します。


これで「human」という名前で、ローカルストレージにJSONデータを格納することができました。

JSONの中のある値だけストレージから削除したい場合

さて本題ですが、上記の例でJSONデータの中に保存した「age」だけ削除したい場合どうするでしょうか?


考える人考える人

そりゃあお前、最初にやったremoveItemを使うじゃろ

じゃけぇじゃけぇ

ほんとにそうかな?


↑こうしてしまうと全部まとめて削除されてしまうのでアウトです。


かといって、



こんなことはできません。




ではどうするかと言うと、


1回データを取り出して、オブジェクトに変換したあと特定の要素を削除して、もう1回保存し直す


ということになります。

コードで見てみましょう。



これでローカルストレージのキー名「human」の中に保存されているのは「”name”:”じゃけぇ”」のみとなりました

さいごに

管理が面倒なので私はあまりストレージを乱用するのは好きじゃないですが、UXを考えるとストレージが適切な場合もあるので扱えるようにしとかないとですね。


それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-