Comment stocker un tableau dans localStorage ?

Question

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

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

Cela fonctionne. Cependant, j'ai besoin de stocker cette variable dans localStorage et elle s'avère assez têtue. J'ai essayé :

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

Où est-ce que je me trompe ?

Answer 1

localStorage ne prend en charge que les chaînes de caractères. Utilisez JSON.stringify() y JSON.parse() .

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

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

Vous pouvez également utiliser l'accès direct pour définir/obtenir un élément :

localstorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

Answer 2

El localStorage y sessionStorage ne peut traiter que des chaînes de caractères. Vous pouvez étendre le storage-objects 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 sauvegarder un tableau ou un objet et localStorage.getObj(key) pour le récupérer. Les mêmes méthodes fonctionnent avec le sessionStorage objet.

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

Answer 3

Utilisez JSON.stringify() y 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 ).

Answer 4

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');

Answer 5

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 de la conversion en JSON, mais serait ennuyeux si vous avez besoin de supprimer des éléments, car vous auriez à réindexer le tableau :)