localStorageで一部のkey/valueを残して削除したい

Question

こんばんは。

表題の件について質問があります。

下記のような構造をlocalStorageに保存した後、初期化をしたい時に**localStorage.clear()**をすると全てのkey/valueが削除されてしまうので、一部の残して削除する場合どのように書けばよろしいでしょうか。

storage = {
   data1:hoge1,
   data2:hoge2,
   data3:hoge3
}
localStorage.setItem("data", storage);

初期化 →　どう書けばいいか??
↓ 
localStorage.getItem("data");
storage = {
   data2:hoge2,
}

一部のkey/valueだけ残したい

よろしくお願いします。

Comments

[m.ts10806]

これだけだと大目的部分が不明です。用途を具体的に記載してください。
単にgetItemしてきて削除したい配列のキーだけ削除してsetItemで戻すだけではダメですか？
clearは本当に全削除なので通常key指定で削除できるlocalStorage.removeItem()を利用しますが、そのオブジェクトのデータを１つまとめてではなく、１つずつ（今回だと３つ）setItemするのではだめなのでしょうか。

Answer 1

この質問文だと2つの解釈の仕方があるけど、どっちになるんだろう？

• localStorageからdataキーを除いて全て捨てたい
• localStorageからdata内のアイテムの内、data2以外の値を捨てたい

1. localStorageからdataキーを除いて全て捨てたい

まずはJavaScriptの実質のリファレンスみたいなMDNを読もう。
localStorageに関して詳しく乗っている。
localStorageはStorageのインスタンスだからこちらを閲覧すればプロパティやメソッドが全部載っているね。
使えそうなのをピックアップしてみよう

プロパティ(メソッドは括弧付きで表記)

• .length: Storage オブジェクトに保存されているデータアイテムの数を表す整数を返します。
• .key(): このメソッドは数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。
• .getItem(): キーの名称を渡すと、キーに対する値を返します。
• .setItem(): キーの名称と値を渡すと、ストレージにキーを追加する、または既存のキーに対する値を更新します。
• .removeItem(): キーの名称を渡すと、ストレージからキーを削除します。
• .clear(): このメソッドを呼び出すと、ストレージからすべてのキーを消去します。

したがってlengthプロパティで保存されているキーの数値を確認、
for文を回しつつkeyメソッドを実行してキー名称を取得、
キー名称が削除対象ならremoveItemメソッドで削除。

これが一般的なやり方。

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  if (key !== 'data') localStorage.remove(key);
}

もしdataキーの情報だけ残せれば良いなら、どっか別の変数に退避してclearすればいい。
その後setItemで登録し直せば完成だ。

var data = localStorage.getItem("data");
localStorage.clear();
localStorage.setItem("data", data);

1. localStorageからdata内のアイテムの内、data2以外の値を捨てたい

もしこちらなら、捨てたいじゃなくて、
新しい値で保存し直したいという言い方の方が正解になる。

そのまんま新しい値を同名のキー情報でsetItemとやれば良いんだけど、
既存のオブジェクトから特定のキーを抜き出す時はdelete構文を用いると良い

var oldData = {
  name: "taro",
  age: 18
}
localStorage.setItem("data", oldData);

// 方法1: 適当に新しいデータで上書き保存
localStorage.setItem("data", {
  name: "jiro"
});

// 方法2: 元のデータを参考にしつつ、特定のキーだけ削除
var newData = localStorage.getItem("data");
delete newData.age;
localStorage.setItem("data", newData);

Comments

[moro123]

ご回答ありがとうございます。
言葉足らず申し訳ございませんでした。
2. localStorageからdata内のアイテムの内、data2以外の値を捨てたい
こちらの方法で解決しました。