La memorizzazione di Oggetti in HTML5 localStorage

Question

Vorrei memorizzare un oggetto JavaScript HTML5 localStorage, ma il mio oggetto, apparentemente, essere convertito in una stringa.

Posso memorizzare e recuperare i primitivi tipi JavaScript e utilizzo di matrici localStorage, ma gli oggetti non sembrano funzionare.Si dovrebbe?

Ecco il mio codice:

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 console è uscita

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

Mi sembra che il setItem il metodo è convertire l'input di una stringa prima di riporlo.

Vedo questo comportamento in Safari, Chrome e Firefox, quindi immagino che sia il mio fraintendimento del HTML5 Web Storage spec, non è un browser specifico problema o limitazione.

Ho cercato di dare un senso al strutturato clone algoritmo descritto in http://www.w3.org/TR/html5/infrastructure.html.Io non comprendere appieno ciò che sta dicendo, ma forse il mio problema ha a che fare con la mia proprietà dell'oggetto non enumerabile (???)

C'è una facile soluzione?

---

Aggiornamento:Il W3C ha cambiato le loro menti circa la strutturati-clone specifica, e ha deciso di cambiare la spec per abbinare le implementazioni.Vedere https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111.Quindi a questa domanda non è più validi al 100%, ma le risposte possono essere di interesse.

Answer 1

di Apple , Mozilla e Mozilla di nuovo la documentazione, la funzionalità sembra essere limitata per gestire il tasto una sola stringa / valore accoppiamenti.

Una soluzione può essere quella di stringa i tuo oggetto prima riporlo, e poi analizzarlo, quando si recupera:

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

Answer 2

Un miglioramento minore, su 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);
}

A causa di corto circuito di valutazione , getObject() sarà immediatamente ritorno null se key non è in deposito. Essa, inoltre, non un'eccezione SyntaxError se value è "" (la stringa vuota; JSON.parse() non può gestire questo).

Answer 3

Si potrebbe trovare utile per estendere l'oggetto di archiviazione con questi metodi pratici:

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

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

In questo modo si ottiene la funzionalità che si voleva davvero, anche se sotto l'API supporta solo le stringhe.

Answer 4

L'estensione dell'oggetto Storage è una soluzione impressionante. Per il mio API, ho creato una facciata per localStorage e quindi verificare se si tratta di un oggetto o meno durante l'impostazione e ottenere.

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

Answer 5

Stringify non risolve tutti i problemi

Sembra che le risposte qui non coprono tutti i tipi di possibile in JavaScript, quindi qui sono alcuni brevi esempi di come trattare con loro in modo corretto:

//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"

Io non consiglio per memorizzare funzioni, perché eval() è il male può portare a problemi riguardanti la sicurezza, l'ottimizzazione e il debug.In generale, eval() non dovrebbe mai essere utilizzato nel codice JavaScript.

I membri privati

Il problema con l'utilizzo di JSON.stringify() per la memorizzazione di oggetti, che questa funzione non può serialise soci privati.Questo problema può essere risolto sovrascrivendo il .toString() metodo (che è chiamato implicitamente quando la memorizzazione dei dati nel web storage):

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

Riferimenti circolari

Un altro problema stringify non può trattare con riferimenti circolari:

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

In questo esempio, JSON.stringify() lancerà una TypeError "Conversione in struttura circolare a JSON".Se la memorizzazione di riferimenti circolari dovrebbe essere supportato, il secondo parametro di JSON.stringify() potrebbe essere utilizzato:

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

Tuttavia, la ricerca di una soluzione efficiente per la memorizzazione di riferimenti circolari, molto dipende dall'attività che devono essere risolti, e il ripristino di tali dati non è banale sia.

Ci sono già alcune domande sul MODO di affrontare questo problema: Stringify (conversione in JSON) un oggetto JavaScript con riferimento circolare

Answer 6

C'è una grande libreria che avvolge molte soluzioni in modo che supporta anche i vecchi browser chiamato jStorage

È possibile impostare un oggetto

$.jStorage.set(key, value)

E recuperarlo facilmente

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

Answer 7

Utilizzo di oggetti JSON per la memorizzazione locale:

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

// Iterazione di tutte le chiavi di memorizzazione locale e valori

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

// DELETE

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

Answer 8

In teoria, è possibile memorizzare oggetti con funzioni:

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

Tuttavia, la funzione di serializzazione / deserializzazione è inaffidabile perché è dipendente dall'implementazione .

Answer 9

Si potrebbe anche ignorare le setItem(key,value) e getItem(key) metodi di default di storage per gestire oggetti / array come qualsiasi altro tipo di dati. In questo modo, si può semplicemente chiamare localStorage.setItem(key,value) e localStorage.getItem(key) come si farebbe normalmente.

Non ho ancora testato questo ampiamente, ma è apparso a lavorare senza problemi per un piccolo progetto che ho armeggiare con.

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

Answer 10

Sono arrivato a questo post dopo aver colpito in un altro post che è stato chiuso come un duplicato di questo - dal titolo 'come memorizzare un array in localStorage?'. Che va bene tranne né filo in realtà fornisce una risposta completa su come è possibile mantenere un array in localStorage -. Ma sono riuscito a creare una soluzione in base alle informazioni contenute in entrambi i fili

Quindi, se qualcun altro è voler essere in grado di spingere / oggetti pop / spostamento all'interno di un array, e vogliono che array memorizzato in localStorage o addirittura sessionStorage, qui si va:

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

esempio di utilizzo - memorizzare stringhe semplici matrice localStorage:

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

Esempio di utilizzo - immagazzinare oggetti nell'array 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);

metodi comuni per manipolare gli array:

.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

Answer 11

Consiglia utilizzando una libreria di astrazione per molte delle caratteristiche discusse qui così come una migliore compatibilità. Un sacco di opzioni:

• jStorage o simpleStorage << la mia preferenza
• localForage
• alekseykulikov / storage
• Lawnchair
• Store.js << un'altra buona opzione
• OMG

Answer 12

Meglio di effettuare funzioni come setter e getter a localStorage , in questo modo si avrà un migliore controllo e non sarà necessario ripetere l'analisi JSON e tutti. sarà anche gestire il vostro (" ") chiave stringa vuota / dati caso senza problemi.

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'} */

Answer 13

Ho modificato uno dei top-risposta votato un po '. Sono un fan di avere un'unica funzione, invece di 2, se non è necessario.

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

Inoltre, se nessun valore è impostato, è il ritorno null invece di false. false ha qualche significato, null non lo fa.

Answer 14

Il miglioramento alla risposta @Guria s':

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

Answer 15

È possibile utilizzare localDataStorage per memorizzare in modo trasparente javascript tipi di dati (Array, Boolean, Data, Float, Integer , String e Object). Fornisce inoltre leggero offuscamento dei dati, comprime automaticamente le stringhe, facilita query chiave (nome), così come di query per valore (chiave), e aiuta a far rispettare storage condiviso a segmenti all'interno dello stesso dominio anteponendo chiavi.

[Disclaimer] Io sono l'autore del programma di utilità [/ NEGAZIONE]

Esempi:

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

Come si può vedere, i valori primitivi siano rispettati.

Answer 16

Un'altra opzione sarebbe quella di utilizzare un plugin esistente.

Per esempio persisto è un progetto open source che fornisce un'interfaccia facile localStorage / sessionStorage e automates persistenza per campi modulo (ingresso, pulsanti di opzione e caselle di controllo).

(Disclaimer: io sono l'autore.)

Answer 17

È possibile utilizzare ejson per memorizzare gli oggetti come stringhe.

  

EJSON è un'estensione di JSON per supportare più tipi. Supporta tutti i tipi di JSON-safe, così come:

     

  
• Data (Date JavaScript)
  
• Binary (Uint8Array JavaScript o il risultato di EJSON.newBinary )
  
• I tipi definiti dall'utente (vedi EJSON.addType . Ad esempio, < a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID è implementato in questo modo.)
  

     

Tutti i serializzazioni EJSON sono anche JSON validi. Per esempio un oggetto con una data e un buffer binario sarebbe serializzato EJSON come:

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

Ecco il mio involucro localStorage utilizzando ejson

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

ho aggiunto alcuni tipi al mio involucro comprese le espressioni regolari e funzioni

Answer 18

http://rhaboo.org è uno strato di zucchero localStorage che permette di scrivere cose come questa:

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

Non usa JSON.stringify / parse perché sarebbe impreciso e lento su grandi oggetti. Invece, ogni valore terminale ha la propria voce localStorage.

Probabilmente si può immaginare che io possa avere qualcosa a che fare con rhaboo; -)

Adrian.

Answer 19

Ho fatto un altro involucro minimalista con solo 20 righe di codice per consentire di utilizzarlo come dovrebbe:

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

Answer 20

Per gli utenti tipografico disposti a impostare e ottenere proprietà tipizzate:

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

Esempio utilizzo :

// 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");

Answer 21

Ecco qualche versione estenderla del codice inviato da @danott

Sarà anche implementare Elimina valore da localStorage e mostra come aggiunge uno strato Getter e Setter così invece di

localstorage.setItem(preview, true)

è possibile scrivere

config.preview = true

Va bene qui erano andate:

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

Bene si può spogliare la parte alias con .bind(...). Comunque ho appena messo in dal momento che è veramente buono da sapere su questo. mi tooked ore per scoprire il motivo per cui un semplice get = localStorage.getItem; non funzionano

Answer 22

Ho fatto una cosa che non si rompe gli oggetti di storage esistenti, ma crea un involucro in modo da poter fare quello che vuoi. Il risultato è un oggetto normale, nessun metodo, con accesso come qualsiasi oggetto.

La cosa che ho fatto.

Se si desidera 1 proprietà localStorage di essere magia:

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

Se avete bisogno di molti:

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

Tutto quello che fai per prop, o gli oggetti all'interno storage verrà salvato automaticamente in localStorage. Sei sempre a giocare con un oggetto reale, in modo da poter fare cose come questa:

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

E ogni nuovo oggetto all'interno di un oggetto tracciato verrà registrata automaticamente.

Il molto grande svantaggio: dipende da Object.observe() quindi ha il supporto del browser molto limitato. E non sembra che sarà venendo per Firefox o bordo in qualunque momento presto.

Answer 23

Guardate questo

Diciamo che sono disponibili le seguenti array chiamato film:

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

Con la funzione di stringa i, l'array film può essere trasformato in una stringa utilizzando la seguente sintassi:

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

Si noti che il mio dati vengono memorizzati sotto la chiave denominata quentinTarantino.

Recupero i vostri dati

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

Per la conversione da una stringa di nuovo a un oggetto, utilizzare la funzione di analisi JSON:

var movies2 = JSON.parse(retrievedData);

È possibile chiamare tutti i metodi di matrice sul movies2

Answer 24

Per memorizzare un oggetto, si potrebbe fare una lettere che è possibile utilizzare per ottenere un oggetto da una stringa a un oggetto (non può avere senso). Ad esempio

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"}

Questa tecnica farà sì che alcuni difetti, se si utilizza la lettera che hai utilizzato per dividere l'oggetto, ed è anche molto sperimentale.

Answer 25

Un piccolo esempio di una libreria che utilizzano localStorage per tenere traccia dei messaggi ricevuti dai contatti:

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

Answer 26

LocalStorage può memorizzare solo coppie di valori-chiave in cui entrambe le chiavi ei valori devono essere stringhe . Tuttavia, è possibile memorizzare oggetto serializzazione loro di JSON stringhe e poi deserializzare agli oggetti JS quando li si recuperano.

Ad esempio:

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

Essere consapevoli del fatto che questo sarà rimuovere la catena di prototipi stabilita. Questo è meglio illustrato tramite un esempio:

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

Answer 27

Ho questo JS oggetto * Voglio conservare questo in HTML5 Local storage

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

posso negozio questo HTML5 Local storage in questo modo, utilizzando JSON.stringify

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

E ora posso ottenere questo oggetto dallo storage locale da JSON.parsing .

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

Answer 28

Loop attraverso la memorizzazione locale

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

retrievedData.forEach(function (item) {
   console.log(item.itemid);
});