web-dev-qa-db-fra.com

Poussez les objets JSON vers un tableau dans localStorage

J'ai une fonction en Javascript:

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

    localStorage.setItem('session', a);

}

le paramètre de données est un objet JSON.

Mais chaque fois que je clique sur le bouton, il écrase les données de mon stockage local.

Est-ce que quelqu'un sait comment faire ça?

javascriptjsonobjectlocal-storage
25
nielsv

Vous devez suivre quelques étapes pour stocker correctement ces informations dans votre stockage local. Avant de passer au code cependant, veuillez noter que localStorage (à l'heure actuelle) ne peux pas contenir tout type de données à l'exception des chaînes. Vous devrez sérialiser la baie pour le stockage, puis l'analyser pour y apporter des modifications.

Étape 1:

Le premier extrait de code ci-dessous ne doit être exécuté que si vous ne stockez pas déjà un tableau sérialisé dans votre variable localStorage session.
Pour vous assurer que votre localStorage est correctement configuré et stocke un tableau, exécutez d'abord l'extrait de code suivant:

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

Le code ci-dessus ne doit être exécuté une fois que et seulement si vous ne stockez pas déjà un tableau dans votre variable localStorage session. Si vous le faites déjà, passez à l'étape 2.

Étape 2:

Modifiez votre fonction comme suit:

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

Cela devrait prendre soin du reste pour vous. Lorsque vous l'analyserez, il deviendra un tableau d'objets.

J'espère que cela t'aides.

69
War10ck

À partir de maintenant, vous pouvez stocker uniquement les valeurs de chaîne dans localStorage. Vous devrez sérialiser l'objet tableau, puis le stocker dans localStorage.

Par exemple:

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

ou

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

Mettre un tableau entier dans une entrée localStorage est très inefficace: le tout doit être ré-encodé chaque fois que vous ajoutez quelque chose au tableau ou changez une entrée.

Une alternative consiste à utiliser http://rhaboo.org qui stocke tout objet JS, même profondément imbriqué, en utilisant une entrée localStorage distincte pour chaque valeur de terminal. Les tableaux sont restaurés beaucoup plus fidèlement, y compris les propriétés non numériques et divers types de rareté, les prototypes/constructeurs d'objets sont restaurés dans les cas standard et l'API est ridiculement simple:

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

BTW, je l'ai écrit.

6
Adrian May

Une chose que je peux vous suggérer est d'étendre l'objet de stockage pour gérer les objets et les tableaux.

LocalStorage ne peut gérer que des chaînes, vous pouvez donc y parvenir en utilisant ces 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))
}

En l'utilisant, toutes les valeurs seront converties en chaîne json sur set et analysées sur get

5
Brugolo