web-dev-qa-db-fra.com

Comment stocker un tableau dans localStorage?

Si je n'avais pas besoin de localStorage, mon code ressemblerait à ceci:

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

Cela marche. Cependant, j'ai besoin de stocker cette variable dans localStorage, ce qui s'avère assez têtu. J'ai essayé:

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

Où vais-je mal?

javascripthtmlarrayshtml5local-storage
564
David

localStorage ne prend en charge que les chaînes. Utilisez JSON.stringify() et JSON.parse().

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

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

Les variables localStorage et sessionStorage ne peuvent gérer que des chaînes. Vous pouvez étendre les objets de stockage par défaut pour gérer les tableaux et les objets. Incluez simplement ce script et utilisez les nouvelles méthodes:

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

Utilisez localStorage.setObj(key, value) pour enregistrer un tableau ou un objet et localStorage.getObj(key) pour le récupérer. Les mêmes méthodes fonctionnent avec l'objet sessionStorage.

Si vous utilisez uniquement les nouvelles méthodes pour accéder au stockage, chaque valeur sera convertie en chaîne JSON avant l'enregistrement et analysée avant d'être renvoyée par le getter.

Source: http://www.acetous.de/p/152

107
Sebastian

Utilisez JSON.stringify() et JSON.parse() comme suggéré par no! Cela évite le problème, peut-être rare mais possible, d'un nom de membre qui inclut le délimiteur (par exemple, nom de membre three|||bars).

16
jayeff

Je viens de créer ceci:

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

L’approche JSON fonctionne, c’est-à-dire que vous avez besoin de json2.js, il fonctionne parfaitement et malgré le commentaire qui dit sinon il y a un stockage local sur celui-ci. il semble vraiment que la meilleure solution avec le moins de tracas. Bien sûr, on pourrait écrire des scripts pour faire essentiellement la même chose que json2 mais cela n’a guère d’intérêt.

au moins avec la chaîne de version suivante, il y a localStorage, mais comme indiqué, vous devez inclure json2.js car le navigateur lui-même ne l'inclut pas: 4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2 ; .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) (J'aurais fait ceci un commentaire sur la réponse, mais ne peut pas).

3
Lassi Kinnunen

Une autre solution serait d’écrire un wrapper qui stocke le tableau comme ceci:

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

Supprime la surcharge liée à la conversion en JSON, mais serait gênant si vous devez supprimer des éléments, car vous devrez réindexer le tableau :)

2
Znarkus