Question

Je voudrais stocker un objet JavaScript HTML5 localStorage, mais mon but est apparemment converti en une chaîne.

Je peux stocker et récupérer des types primitifs JavaScript et tableaux à l'aide localStorage, mais les objets ne semblent pas fonctionner. Devraient-ils?

Voici mon code:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

La sortie de la console est

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

Il me semble que la méthode setItem convertit l'entrée à une chaîne avant de le ranger.

Je vois ce comportement dans Safari, Chrome et Firefox, donc je suppose que c'est mon incompréhension de la HTML5 la spécification de stockage Web, pas un bug spécifique au navigateur ou la limitation.

J'ai essayé de donner un sens clone structuré algorithme décrit dans http://www.w3.org/TR/html5/infrastructure.html . Je ne suis pas bien comprendre ce qu'il dit, mais peut-être mon problème a à voir avec les propriétés de mon objet ne pas être dénombrable (???)

Y at-il une solution facile?


Mise à jour: Le W3C a finalement changé d'avis sur la spécification structurée-clone, et a décidé de changer les spécifications pour répondre aux mises en œuvre. Voir https://www.w3.org/Bugs/Public/show_bug. cgi? id = 12111 . Donc, cette question est plus de 100% valide, mais les réponses peuvent encore intéresser.

Était-ce utile?

La solution

En regardant le d'Apple , Mozilla et stringify votre objet avant stocker, puis analyser quand vous récupériez:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Autres conseils

Une amélioration mineure sur une variante :

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

En raison de évaluation de court-circuit , getObject() sera immédiatement null de retour si key est pas dans le stockage. Il ne sera pas aussi jeter une exception SyntaxError si value est "" (la chaîne vide, JSON.parse() ne peut pas gérer).

Vous trouverez peut-être utile d'étendre l'objet de stockage avec ces méthodes pratiques:

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    return JSON.parse(this.getItem(key));
}

De cette façon, vous obtenez la fonctionnalité que vous vouliez vraiment bien sous l'API prend en charge uniquement les chaînes.

L'extension de l'objet de stockage est une solution impressionnante. Pour mon API, j'ai créé une façade pour localStorage et vérifier si elle est un objet ou non lors de la configuration et obtenir.

var data = {
  set: function(key, value) {
    if (!key || !value) {return;}

    if (typeof value === "object") {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },
  get: function(key) {
    var value = localStorage.getItem(key);

    if (!value) {return;}

    // assume it is an object that has been stringified
    if (value[0] === "{") {
      value = JSON.parse(value);
    }

    return value;
  }
}

stringify ne résout pas tous les problèmes

Il semble que les réponses ici ne couvrent pas tous les types qui sont possibles en JavaScript, donc voici quelques exemples courts sur la façon de les traiter correctement:

//Objects and Arrays:
    var obj = {key: "value"};
    localStorage.object = JSON.stringify(obj);  //Will ignore private members
    obj = JSON.parse(localStorage.object);
//Boolean:
    var bool = false;
    localStorage.bool = bool;
    bool = (localStorage.bool === "true");
//Numbers:
    var num = 42;
    localStorage.num = num;
    num = +localStorage.num;    //short for "num = parseFloat(localStorage.num);"
//Dates:
    var date = Date.now();
    localStorage.date = date;
    date = new Date(parseInt(localStorage.date));
//Regular expressions:
    var regex = /^No\.[\d]*$/i;     //usage example: "No.42".match(regex);
    localStorage.regex = regex;
    var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
    regex = new RegExp(components[1], components[2]);
//Functions (not recommended):
    function func(){}
    localStorage.func = func;
    eval( localStorage.func );      //recreates the function with the name "func"

Je ne recommande pas aux fonctions de magasin, car le mal est eval() peut conduire à des problèmes en matière de sécurité, d'optimisation et de débogage.         En général, eval() ne doit jamais être utilisé dans le code JavaScript.

membres privés

Le problème avec l'utilisation JSON.stringify() pour le stockage d'objets est que cette fonction ne peut pas serialise membres privés. Ce problème peut être résolu en remplaçant la méthode de .toString() (que l'on appelle implicitement lors du stockage de données dans le stockage Web):

//Object with private and public members:
    function MyClass(privateContent, publicContent){
        var privateMember = privateContent || "defaultPrivateValue";
        this.publicMember = publicContent  || "defaultPublicValue";

        this.toString = function(){
            return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
        };
    }
    MyClass.fromString = function(serialisedString){
        var properties = JSON.parse(serialisedString || "{}");
        return new MyClass( properties.private, properties.public );
    };
//Storing:
    var obj = new MyClass("invisible", "visible");
    localStorage.object = obj;
//Loading:
    obj = MyClass.fromString(localStorage.object);

Références circulaires

Une autre stringify problème ne peut pas traiter sont des références circulaires:

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj);  //Fails

Dans cet exemple, JSON.stringify() va lancer une TypeError "Conversion de la structure circulaire JSON" .         Si le stockage des références circulaires doivent être pris en charge, peut être utilisé le deuxième paramètre de JSON.stringify():

var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
    if( key == 'circular') {
        return "$ref"+value.id+"$";
    } else {
        return value;
    }
});

Cependant, la recherche d'une solution efficace pour stocker des références circulaires dépend en grande partie des tâches qui doivent être résolus, et la restauration de ces données ne sont pas trivial soit.

Il y a déjà une question sur le traitement SO à ce problème: stringify (convertir en JSON) avec un objet JavaScript de référence circulaire

Il y a une grande bibliothèque qui encadre de nombreuses solutions pour qu'il supporte même les anciens navigateurs appelés jStorage

Vous pouvez définir un objet

$.jStorage.set(key, value)

Et le récupérer facilement

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

Utilisation d'objets JSON pour le stockage local:

// SET

var m={name:'Hero',Title:'developer'};
localStorage.setItem('us', JSON.stringify(m));

// GET

var gm =JSON.parse(localStorage.getItem('us'));
console.log(gm.name);

// Itération de toutes les clés de stockage local et les valeurs

for (var i = 0, len = localStorage.length; i < len; ++i) {
  console.log(localStorage.getItem(localStorage.key(i)));
}

// SUPPRIMER

localStorage.removeItem('us');
delete window.localStorage["us"];

En théorie, il est possible de stocker des objets avec des fonctions:

function store (a)
{
  var c = {f: {}, d: {}};
  for (var k in a)
  {
    if (a.hasOwnProperty(k) && typeof a[k] === 'function')
    {
      c.f[k] = encodeURIComponent(a[k]);
    }
  }

  c.d = a;
  var data = JSON.stringify(c);
  window.localStorage.setItem('CODE', data);
}

function restore ()
{
  var data = window.localStorage.getItem('CODE');
  data = JSON.parse(data);
  var b = data.d;

  for (var k in data.f)
  {
    if (data.f.hasOwnProperty(k))
    {
      b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
    }
  }

  return b;
}

Toutefois, la sérialisation Fonction / désérialisation est peu fiable, car il est mise en œuvre dépendant .

Vous pouvez également remplacer les méthodes de stockage par défaut de setItem(key,value) et getItem(key) pour manipuler des objets / tableaux comme tout autre type de données. De cette façon, vous pouvez simplement appeler localStorage.setItem(key,value) et localStorage.getItem(key) comme vous le feriez normalement.

Je n'ai pas testé intensivement, mais il est apparu travailler sans problème pour un petit projet, je l'ai été bricoler avec.

Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value)
{
  this._setItem(key, JSON.stringify(value));
}

Storage.prototype._getItem = Storage.prototype.getItem;
Storage.prototype.getItem = function(key)
{  
  try
  {
    return JSON.parse(this._getItem(key));
  }
  catch(e)
  {
    return this._getItem(key);
  }
}

Je suis arrivé à ce poste après avoir frappé un autre poste qui a été fermé en double de ce - intitulé « comment stocker un tableau dans localStorage? ». Ce qui est bien, sauf aucun thread fournit en fait une réponse complète à la façon dont vous pouvez maintenir un tableau dans localStorage -. Mais j'ai réussi à concevoir une solution basée sur les informations contenues dans les deux fils

Donc, si quelqu'un d'autre est de vouloir être en mesure de pousser / éléments pop / changement dans un tableau, et ils veulent ce tableau stocké dans localStorage ou bien sessionStorage, ici vous allez:

Storage.prototype.getArray = function(arrayName) {
  var thisArray = [];
  var fetchArrayObject = this.getItem(arrayName);
  if (typeof fetchArrayObject !== 'undefined') {
    if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
  }
  return thisArray;
}

Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.push(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.popArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.pop();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.shiftArrayItem = function(arrayName) {
  var arrayItem = {};
  var existingArray = this.getArray(arrayName);
  if (existingArray.length > 0) {
    arrayItem = existingArray.shift();
    this.setItem(arrayName,JSON.stringify(existingArray));
  }
  return arrayItem;
}

Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
  var existingArray = this.getArray(arrayName);
  existingArray.unshift(arrayItem);
  this.setItem(arrayName,JSON.stringify(existingArray));
}

Storage.prototype.deleteArray = function(arrayName) {
  this.removeItem(arrayName);
}

Exemple d'utilisation - le stockage des chaînes simples dans le tableau localStorage:

localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');

Exemple d'utilisation - le stockage d'objets à réseau sessionStorage:

var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);

var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);

méthodes communes pour manipuler des tableaux:

.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage

On recommande l'utilisation d'une bibliothèque d'abstraction pour la plupart des caractéristiques décrites ici, ainsi que une meilleure compatibilité. Beaucoup d'options:

Mieux que vous faites fonctionne comme setter et getter localStorage , de cette façon, vous aurez un meilleur contrôle et ne sera pas à répéter l'analyse syntaxique JSON et tout. il va même gérer votre ( » « ) touche chaîne vide / cas de données sans problème.

function setItemInStorage(dataKey, data){
    localStorage.setItem(dataKey, JSON.stringify(data));
}

function getItemFromStorage(dataKey){
    var data = localStorage.getItem(dataKey);
    return data? JSON.parse(data): null ;
}

setItemInStorage('user', { name:'tony stark' });
getItemFromStorage('user'); /* return {name:'tony stark'} */

J'ai modifié une réponse de haut voté un peu. Je suis fan d'avoir seule fonction au lieu de 2 si elle est pas nécessaire.

Storage.prototype.object = function(key, val) {
    if ( typeof val === "undefined" ) {
        var value = this.getItem(key);
        return value ? JSON.parse(value) : null;
    } else {
        this.setItem(key, JSON.stringify(val));
    }
}

localStorage.object("test", {a : 1}); //set value
localStorage.object("test"); //get value

En outre, si aucune valeur est définie, il est de retour null au lieu de false. false a un sens, null ne fonctionne pas.

Amélioration de la réponse de @Guria:

Storage.prototype.setObject = function (key, value) {
    this.setItem(key, JSON.stringify(value));
};


Storage.prototype.getObject = function (key) {
    var value = this.getItem(key);
    try {
        return JSON.parse(value);
    }
    catch(err) {
        console.log("JSON parse failed for lookup of ", key, "\n error was: ", err);
        return null;
    }
};

Vous pouvez utiliser localDataStorage pour stocker de manière transparente javascript types de données (Array, Boolean, Date, Float, Entier , String et Object). Il fournit également des faux-fuyants de données légère, compresse automatiquement les chaînes, facilite la requête par clé (nom), ainsi que par requête (clé) valeur, et aide à respecter le stockage segmenté partagé dans le même domaine par des touches préfixer.

[DISCLAIMER] Je suis l'auteur de l'utilitaire [/ DISCLAIMER]

Exemples:

localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )

localDataStorage.get( 'key1' )   -->   'Belgian'
localDataStorage.get( 'key2' )   -->   1200.0047
localDataStorage.get( 'key3' )   -->   true
localDataStorage.get( 'key4' )   -->   Object {RSK: Array(5)}
localDataStorage.get( 'key5' )   -->   null

Comme vous pouvez le voir, les valeurs primitives sont respectées.

Une autre option serait d'utiliser un plug-in existant.

Par exemple persisto est un projet open source qui fournit une interface facile à localStorage / sessionStorage et automatise la persistance de champs de formulaire (entrée, boutons radio et cases à cocher).

(Disclaimer: Je suis l'auteur.)

Vous pouvez utiliser ejson pour stocker les objets sous forme de chaînes.

  

EJSON est une extension de JSON pour soutenir plusieurs types. Il prend en charge tous les types de JSON-sécurité, ainsi que:

     
      
  • Date (JavaScript Date)
  •   
  • Binary (Uint8Array JavaScript ou le résultat de EJSON.newBinary )
  •   
  • types définis par l'utilisateur (voir EJSON.addType . Par exemple, < a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID est mise en œuvre de cette façon.)
  •   
     

Tous les sérialisations de EJSON sont également valables JSON. Par exemple, un objet avec une date et un tampon binaire serait publié en feuilleton dans EJSON comme:

{
  "d": {"$date": 1358205756553},
  "b": {"$binary": "c3VyZS4="}
}

Voici mon emballage localStorage utilisant ejson

https://github.com/UziTech/storage.js

J'ai ajouté quelques types à mon emballage, y compris les expressions régulières et fonctions

http://rhaboo.org est une couche de sucre localStorage qui vous permet d'écrire des choses comme ceci:

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

Il n'utilise JSON.stringify / parse parce que ce serait inexact et lent sur de gros objets. Au lieu de cela, chaque valeur terminale a sa propre entrée localStorage.

Vous pouvez probablement deviner que je pourrais avoir quelque chose à voir avec rhaboo; -)

Adrian.

J'ai fait un autre emballage, avec seulement 20 minimalistes lignes de code pour permettre l'utiliser comme il se doit:

localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey');   // --> true
localStorage.get('myKey');   // --> {a:[1,2,5], b: 'ok'}
localStorage.keys();         // --> ['myKey']
localStorage.remove('myKey');

https://github.com/zevero/simpleWebstorage

Pour les utilisateurs désireux de créer Tapuscrit et obtenir des propriétés typées:

/**
 * Silly wrapper to be able to type the storage keys
 */
export class TypedStorage<T> {

    public removeItem(key: keyof T): void {
        localStorage.removeItem(key);
    }

    public getItem<K extends keyof T>(key: K): T[K] | null {
        const data: string | null =  localStorage.getItem(key);
        return JSON.parse(data);
    }

    public setItem<K extends keyof T>(key: K, value: T[K]): void {
        const data: string = JSON.stringify(value);
        localStorage.setItem(key, data);
    }
}

Exemple d'utilisation :

// write an interface for the storage
interface MyStore {
   age: number,
   name: string,
   address: {city:string}
}

const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();

storage.setItem("wrong key", ""); // error unknown key
storage.setItem("age", "hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok

const address: {city:string} = storage.getItem("address");

Voici une version Extented du code affiché par @danott

Il va également mettre en œuvre Supprimer valeur de localStorage et montre comment ajoute une couche getter et setter donc au lieu de

localstorage.setItem(preview, true)

vous pouvez écrire

config.preview = true

D'accord ici étaient aller:

var PT=Storage.prototype

if (typeof PT._setItem >='u') PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
  if (typeof value >='u')//..ndefined
    this.removeItem(key)
  else
    this._setItem(key, JSON.stringify(value));
}

if (typeof PT._getItem >='u') PT._getItem = PT.getItem;
PT.getItem = function(key)
{  
  var ItemData = this._getItem(key)
  try
  {
    return JSON.parse(ItemData);
  }
  catch(e)
  {
    return ItemData;
  }
}

// Aliases for localStorage.set/getItem 
get =   localStorage.getItem.bind(localStorage)
set =   localStorage.setItem.bind(localStorage)

// Create ConfigWrapperObject
var config = {}

// Helper to create getter & setter
function configCreate(PropToAdd){
    Object.defineProperty( config, PropToAdd, {
      get: function ()      { return (  get(PropToAdd)      ) },
      set: function (val)   {           set(PropToAdd,  val ) }
    })
}
//------------------------------

// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...

// Config Data transfer
//set
config.preview = true

//get
config.preview

// delete
config.preview = undefined

Eh bien, vous pouvez enlever la partie des alias avec .bind(...). Mais je l'ai mis en car il est vraiment bon de savoir à ce sujet. Je me tooked heures pour savoir pourquoi simple get = localStorage.getItem; ne fonctionne pas

J'ai fait une chose qui ne casse pas les objets de stockage existants, mais crée une enveloppe de sorte que vous pouvez faire ce que vous voulez. Le résultat est un objet normal, aucune méthode, avec accès comme tout objet.

La chose que je fait.

Si vous voulez 1 propriété localStorage être magique:

var prop = ObjectStorage(localStorage, 'prop');

Si vous avez besoin de plusieurs:

var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

Tout ce que vous faites pour prop, ou les objets intérieur storage sera automatiquement sauvegardé dans localStorage. Vous êtes toujours jouer avec un objet réel, de sorte que vous pouvez faire des choses comme ceci:

storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});

Et chaque nouvel objet dans un objet suivi sera automatiquement suivi.

L'inconvénient très grand: cela dépend de Object.observe() il a le soutien du navigateur très limité. Et il ne semble pas que ça va être à venir pour Firefox ou bord à tout moment bientôt.

Regardez cette

Disons que vous avez le tableau suivant appelé les films:

var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown", 
              "Kill Bill", "Death Proof", "Inglourious Basterds"];

En utilisant la fonction stringify, votre tableau de films peut être transformé en une chaîne en utilisant la syntaxe suivante:

localStorage.setItem("quentinTarantino", JSON.stringify(movies));

Notez que mes données sont stockées sous la clé appelée quentinTarantino.

Récupérer vos données

var retrievedData = localStorage.getItem("quentinTarantino");

Pour convertir une chaîne de retour à un objet, utilisez la fonction d'analyse syntaxique JSON:

var movies2 = JSON.parse(retrievedData);

Vous pouvez appeler toutes les méthodes de tableau sur votre movies2

Pour stocker un objet, vous pouvez faire une des lettres que vous pouvez utiliser pour obtenir un objet à partir d'une chaîne à un objet (ne peut pas donner un sens). Par exemple

var obj = {a: "lol", b: "A", c: "hello world"};
function saveObj (key){
    var j = "";
    for(var i in obj){
        j += (i+"|"+obj[i]+"~");
    }
    localStorage.setItem(key, j);
} // Saving Method
function getObj (key){
    var j = {};
    var k = localStorage.getItem(key).split("~");
    for(var l in k){
        var m = k[l].split("|");
        j[m[0]] = m[1];
    }
    return j;
}
saveObj("obj"); // undefined
getObj("obj"); // {a: "lol", b: "A", c: "hello world"}

Cette technique provoque quelques problèmes si vous utilisez la lettre que vous avez utilisé pour diviser l'objet, et il est également très expérimental.

Un petit exemple d'une bibliothèque qui utilisent localStorage pour garder la trace des messages reçus des contacts:

// This class is supposed to be used to keep a track of received message per contacts.
// You have only four methods:

// 1 - Tells you if you can use this library or not...
function isLocalStorageSupported(){
    if(typeof(Storage) !== "undefined" && window['localStorage'] != null ) {
         return true;
     } else {
         return false;
     }
 }

// 2 - Give the list of contacts, a contact is created when you store the first message
 function getContacts(){
    var result = new Array();
    for ( var i = 0, len = localStorage.length; i < len; ++i ) {
        result.push(localStorage.key(i));
    }
    return result;
 }

 // 3 - store a message for a contact
 function storeMessage(contact, message){
    var allMessages;
    var currentMessages = localStorage.getItem(contact);
    if(currentMessages == null){
        var newList = new Array();
        newList.push(message);
        currentMessages = JSON.stringify(newList);
    }
    else
    {
        var currentList =JSON.parse(currentMessages);
        currentList.push(message);
        currentMessages = JSON.stringify(currentList);
    }
    localStorage.setItem(contact, currentMessages);
 }

 // 4 - read the messages of a contact
 function readMessages(contact){

    var result = new Array();
    var currentMessages = localStorage.getItem(contact);

    if(currentMessages != null){
        result =JSON.parse(currentMessages);
    }
    return result;
 }

localStorage ne peut stocker des paires clé-valeur où les deux clés et les valeurs ont à être des chaînes . Cependant, vous pouvez stocker objet en les sérialisation à JSON cordes, puis les désérialiser à des objets JS lorsque vous les récupérer.

Par exemple:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// JSON.stringify turns a JS object into a JSON string, thus we can store it
localStorage.setItem('testObject', JSON.stringify(testObject));

// After we recieve a JSON string we can parse it into a JS object using JSON.parse
var jsObject = JSON.parse(localStorage.getItem('testObject')); 

Soyez conscient du fait que cela supprimera la chaîne prototype établie. Ceci est mieux illustré par un exemple:

function testObject () {
  this.one = 1;
  this.two = 2;
  this.three = 3;
}

testObject.prototype.hi = 'hi';

var testObject1 = new testObject();

// logs the string hi, derived from prototype
console.log(testObject1.hi);

// the prototype of testObject1 is testObject.prototype
console.log(Object.getPrototypeOf(testObject1));

// stringify and parse the js object, will result in a normal JS object
var parsedObject = JSON.parse(JSON.stringify(testObject1));

// the newly created object now has Object.prototype as its prototype 
console.log(Object.getPrototypeOf(parsedObject) === Object.prototype);
// no longer is testObject the prototype
console.log(Object.getPrototypeOf(parsedObject) === testObject.prototype);

// thus we cannot longer access the hi property since this was on the prototype
console.log(parsedObject.hi); // undefined

Je possède ce JS Object * Je veux le stocker dans stockage local HTML5

   todosList = [
    { id: 0, text: "My todo", finished: false },
    { id: 1, text: "My first todo", finished: false },
    { id: 2, text: "My second todo", finished: false },
    { id: 3, text: "My third todo", finished: false },
    { id: 4, text: "My 4 todo", finished: false },
    { id: 5, text: "My 5 todo", finished: false },
    { id: 6, text: "My 6 todo", finished: false },
    { id: 7, text: "My 7 todo", finished: false },
    { id: 8, text: "My 8 todo", finished: false },
    { id: 9, text: "My 9 todo", finished: false }
];

Je peux magasin ce stockage local HTML5 de cette façon, en utilisant JSON.stringify

localStorage.setItem("todosObject", JSON.stringify(todosList));

Et maintenant je peux obtenir cet objet de stockage local par JSON.parsing .

todosList1 = JSON.parse(localStorage.getItem("todosObject"));
console.log(todosList1);

Boucle dans le stockage local

var retrievedData = localStorage.getItem("MyCart");                 

retrievedData.forEach(function (item) {
   console.log(item.itemid);
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top