web-dev-qa-db-ja.com

LocalStorageに配列を格納する方法

LocalStorageが不要な場合、私のコードは次のようになります。

var names=new Array(); 
names[0]=Prompt("New member name?");

これはうまくいきます。しかし、私はこの変数をlocalStorageに保存する必要があり、それは非常に頑固です。私はもう試した：

var localStorage[names] = new Array();
localStorage.names[0] = Prompt("New member name?");

どこが悪いの？

javascripthtmlarrayshtml5local-storage
543
David

localStorageは文字列のみをサポートします。 JSON.stringify()とJSON.parse()を使用してください。

var names = [];
names[0] = Prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));

//...
var storedNames = JSON.parse(localStorage.getItem("names"));
1009
Dagg Nabbit

localStorageとsessionStorageは文字列しか扱えません。デフォルトのstorage-objectsを拡張して、配列とオブジェクトを処理することができます。このスクリプトを含めて、新しいメソッドを使うだけです。

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

配列またはオブジェクトを保存するにはlocalStorage.setObj(key, value)を、取り出すにはlocalStorage.getObj(key)を使用してください。同じメソッドがsessionStorageオブジェクトに対しても機能します。

新しいメソッドを使用してストレージにアクセスするだけの場合、保存する前にすべての値がJSON文字列に変換され、getterによって返される前に解析されます。

出典： http://www.acetous.de/p/152

103
Sebastian

Noで示唆されているようにJSON.stringify()とJSON.parse()を使ってください。これは、デリミタを含むメンバ名（例：メンバ名three|||bars）の、まれではあるが起こり得る問題を防ぎます。

15
jayeff

ちょうどこれを作成しました：

https://Gist.github.com/3854049

//Setter
Storage.setObj('users.albums.sexPistols',"blah");
Storage.setObj('users.albums.sexPistols',{ sid : "My Way", nancy : "Bitch" });
Storage.setObj('users.albums.sexPistols.sid',"Other songs");

//Getters
Storage.getObj('users');
Storage.getObj('users.albums');
Storage.getObj('users.albums.sexPistols');
Storage.getObj('users.albums.sexPistols.sid');
Storage.getObj('users.albums.sexPistols.nancy');
6
Klederson Bueno

JSONアプローチは7で動作します。つまり7ではjson2.jsが必要です。それ以外はlocalStorageがあるという1つのコメントにもかかわらず、完璧に動作します。それは本当に手間のかからない最善の解決策のようです。もちろん、json2と基本的に同じことをするスクリプトを書くこともできますが、その点にはほとんど意味がありません。

少なくとも次のバージョン文字列ではlocalStorageがありますが、json2.jsはブラウザ自体には含まれていないため、json2.jsを含める必要があると言われています。 ; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; BRI/2; NP06; .NET4.0C; .NET4.0E; Zune 4.7）（私はこれについてのコメントをしたはずです）返信はできますができません。

3
Lassi Kinnunen

別の解決策は、このように配列を格納するラッパーを書くことです。

localStorage.setItem('names_length', names.length);
localStorage.setItem('names_0', names[0]);
localStorage.setItem('names_1', names[1]);
localStorage.setItem('names_' + n, names[n]);

JSONへの変換のオーバーヘッドを取り除きますが、配列を再インデックスしなければならないので要素を削除する必要がある場合は面倒です。

2
Znarkus