web-dev-qa-db-ja.com

JSONオブジェクトをlocalStorageの配列にプッシュします

私はJavascriptで関数を持っています：

var a = [];
function SaveDataToLocalStorage(data)
{       
    var receiveddata = JSON.stringify(data);
    a.Push(receiveddata);
    alert(a);

    localStorage.setItem('session', a);

}

データパラメータはJSONオブジェクトです。

しかし、ボタンをクリックするたびに、localstorageのデータが上書きされます。

誰もこれを行う方法を知っていますか？

javascriptjsonobjectlocal-storage
25
nielsv

LocalStorageにこの情報を適切に保存するには、いくつかの手順が必要です。ただし、コードを理解する前に、localStorage（現時点）に注意してください。 できない 文字列以外の任意のデータ型を保持します。ストレージ用にアレイをシリアル化してから、それを解析して変更を加える必要があります。

ステップ1：

以下の最初のコードスニペットは、localStorage session変数にシリアル化された配列をまだ保存していない場合にのみ実行する必要があります。
localStorageが適切にセットアップされ、アレイが保存されるようにするには、最初に次のコードスニペットを実行します。

var a = [];
a.Push(JSON.parse(localStorage.getItem('session')));
localStorage.setItem('session', JSON.stringify(a));

上記のコードは実行するだけです 一回 まだ保存していない場合のみ アレイ localStorage session変数で。すでにこれを行っている場合は、手順2に進みます。

ステップ2：

次のように関数を変更します。

function SaveDataToLocalStorage(data)
{
    var a = [];
    // Parse the serialized data back into an aray of objects
    a = JSON.parse(localStorage.getItem('session'));
    // Push the new data (whether it be an object or anything else) onto the array
    a.Push(data);
    // Alert the array value
    alert(a);  // Should be something like [Object array]
    // Re-serialize the array back into a string and store it in localStorage
    localStorage.setItem('session', JSON.stringify(a));
}

これはあなたのための残りの世話をする必要があります。解析すると、オブジェクトの配列になります。

お役に立てれば。

69
War10ck

現在のところ、文字列値のみを保存 localStorageに保存できます。配列オブジェクトをシリアル化し、localStorageに保存する必要があります。

例えば：

localStorage.setItem('session', a.join('|'));

または

localStorage.setItem('session', JSON.stringify(a));
8
techfoobar

配列全体を1つのlocalStorageエントリに入れるのは非常に非効率的です。配列に何かを追加するか、1つのエントリを変更するたびに、全体を再エンコードする必要があります。

別の方法は、 http://rhaboo.org を使用することです。これは、JSオブジェクトを格納しますが、深くネストされていますが、各端末値に個別のlocalStorageエントリを使用します。非数値プロパティやさまざまなタイプのスパース性など、配列はより忠実に復元され、オブジェクトプロトタイプ/コンストラクターは標準的な場合に復元され、APIは滑luにシンプルです。

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);

store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});  
store.somethingfancy.went[1].mow.write(1, 'lawn');

ところで、私はそれを書いた。

6
Adrian May

提案できることの1つは、ストレージオブジェクトを拡張してオブジェクトと配列を処理することです。

LocalStorageは文字列のみを処理できるため、これらのメソッドを使用してそれを実現できます。

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}

それを使用すると、すべての値が設定時にJSON文字列に変換され、取得時に解析されます

5
Brugolo