web-dev-qa-db-fra.com

Comment stocker et récupérer des données JSON dans un stockage local?

J'ai ce code:

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

Ce code utilisera localStorage.

Voici maintenant le code pour obtenir les données stockées:

var retrievedObject = localStorage.getItem('added-items');

Mon problème est maintenant, comment puis-je obtenir la taille des éléments de données? la réponse doit être 2.

Comment puis-je obtenir le "Item1" et "Item2"?

J'ai essayé retrievedObject[0][0] mais ça ne marche pas.

Et comment ajouter des données à ce sujet? alors il sera 

{"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}

Puis-je utiliser JSON.stringify?

javascriptjsonlocal-storage
7
JMA
var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
localStorage.setItem('added-items', JSON.stringify(string));

stringify signifie, prend une object et renvoie sa présentation sous la forme string. Ce que vous avez est déjà une chaîne et non un objet JSON.

Le contraire est JSON.parse qui prend une string et le transforme en une object.

Ni l'un ni l'autre n'ont à voir avec la taille d'un tableau. Lorsque vous codez correctement JavaScript, vous n’utilisez presque jamais JSON.parse ou JSON.stringify. Seulement si sérialisation est explicitement souhaité.

Utilisez length pour la taille du tableau:

var obj = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"Desc":"Item3"}]}
console.debug(obj.items.length);
8
DanFromGermany
// THIS IS ALREADY STRINGIFIED
var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';

// DO NOT STRINGIFY AGAIN WHEN WRITING TO LOCAL STORAGE
localStorage.setItem('added-items', string);

// READ STRING FROM LOCAL STORAGE
var retrievedObject = localStorage.getItem('added-items');

// CONVERT STRING TO REGULAR JS OBJECT
var parsedObject = JSON.parse(retrievedObject);

// ACCESS DATA
console.log(parsedObject.items[0].Desc);
4
user663031

Pour éclaircir les futures personnes qui pourraient trébucher sur cette question et trouver la réponse acceptée: ne pas être tout ce que vous espériez et rêviez:

J'ai étendu la question afin que l'utilisateur puisse soit entrer une string, soit une JSON dans localStorage.

Inclus sont deux fonctions, AddToLocalStorage(data) et GetFromLocalStorage(key).

Avec AddToLocalStorage(data), si votre entrée n’est pas une string (telle que JSON), elle sera convertie en une.

GetFromLocalStorage(key) récupère les données de localStorage de ladite key

La fin du script montre un exemple montrant comment examiner et modifier les données au sein de JSON. Comme il s’agit d’une combinaison d’objets et de tableau, il convient d’utiliser une combinaison de . et [] là où elles s’appliquent.

var string = '{"items":[{"Desc":"Item1"},{"Desc":"Item2"}]}';
var json = {"items":[{"Desc":"Item1"},{"Desc":"Item2"},{"firstName":"John"},{"lastName":"Smith"}]};

localStorage.setItem('added-items', AddToLocalStorage(string));
localStorage.setItem('added-items', AddToLocalStorage(json));

// this function converts JSON into string to be entered into localStorage
function AddToLocalStorage(data) {
  if (typeof data != "string") {data = JSON.stringify(data);}
  return data;
}

// this function gets string from localStorage and converts it into JSON
function GetFromLocalStorage(key) {
  return JSON.parse(localStorage.getItem(key));
}

var myData = GetFromLocalStorage("added-items");

console.log(myData.items[2].firstName)    // "John"

myData.items[2].firstName = ["John","Elizabeth"];
myData.items[2].lastName = ["Smith","Howard"];

console.log(myData.items[2])    // {"firstName":["John","Elizabeth"],"lastName":["Smith","Howard"]}

console.log(myData.items.length)    // 4

3
zack

JSON.parse est certainement le meilleur moyen de créer un objet, mais je voudrais simplement ajouter que si cela ne fonctionne pas (en raison d'un manque de support), obj = eval('(' + str + ')'); devrait fonctionner. J'ai eu par le passé un problème avec un convertisseur HTML vers PDF qui n'incluait pas JSON.parse et eval. Essayez d'abord JSON.parse.

Accédez à votre objet: obj.items[0].Desc;

0
Donnie D'Amato