El almacenamiento de objetos en el local de HTML5

Question

Me gustaría almacenar un objeto JavaScript en HTML5 localStorage, pero mi objeto aparentemente se está convirtiendo en una cadena.

puedo almacenar y recuperar tipos y matrices usando localStorage primitivas de JavaScript, pero no parecen objetos a trabajar. ¿Deberían ellos?

Aquí está mi código:

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 salida de la consola es

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

A mi me parece como el método setItem es la conversión de la entrada en una cadena antes de guardarla.

veo este comportamiento en Safari, Chrome y Firefox, así que supongo que es mi mala interpretación de la HTML5 especificación almacenamiento web , no un error o limitación específica del navegador.

He tratado de dar sentido a la clon estructurado algoritmo descrito en http://www.w3.org/TR/html5/infrastructure.html . No entender completamente lo que está diciendo, pero tal vez mi problema tiene que ver con las propiedades de mi objeto no ser enumerable (???)

¿Hay una solución fácil?

---

Actualización: El W3C finalmente cambió de opinión acerca de la especificación estructurada-clon, y decidió cambiar la especificación para que coincida con las implementaciones. Ver https://www.w3.org/Bugs/Public/show_bug. cgi? id = 12111 . Por lo que esta cuestión ya no es 100% válida, pero las respuestas todavía puede ser de interés.

Answer 1

En cuanto a la de Apple , Mozilla y Mozilla nuevo documentación, la funcionalidad parece estar limitada para manejar tecla una sola cadena / valor pares.

Una solución puede ser la de stringify su objeto antes almacenarla, y posteriormente analizarlo cuando se recupere:

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

Una pequeña mejora en un 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);
}

Debido a de cortocircuito evaluación , se getObject() inmediatamente null regreso si key no está en almacenamiento. Asimismo, no lanzar una excepción si SyntaxError value es "" (la cadena vacía; JSON.parse() no puede manejar eso).

Answer 3

Puede que le resulte útil para extender el objeto de almacenamiento con estos métodos prácticos:

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

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

De esta manera se obtiene la funcionalidad que realmente quería a pesar de que debajo de la API sólo admite cadenas.

Answer 4

Extendiendo el objeto de almacenamiento es una solución impresionante. Por mi API, he creado una fachada para el almacenamiento local y luego comprobar si es o no un objeto, mientras que establecer y obtener.

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 no resuelve todos los problemas

Parece que las respuestas aquí no cubren todos los tipos que son posibles en JavaScript, así que aquí están algunos ejemplos breves sobre cómo tratar con ellos correctamente:

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

No recomiendo a las funciones de tienda porque eval() es el mal puede conducir a problemas en materia de seguridad, optimización y depuración.         En general, eval() nunca debe ser usado en el código JavaScript.

Los miembros privados

El problema con el uso JSON.stringify() para el almacenamiento de objetos es, que esta función no se puede serializar los miembros privados. Este problema puede ser resuelto por sobrescribir el método .toString() (que se llama implícitamente al almacenamiento de datos en el almacenamiento 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);

Las referencias circulares

Otra stringify problema no puede hacer frente a las referencias circulares son:

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

En este ejemplo, JSON.stringify() arrojará un TypeError "Conversión de estructura circular a JSON" .         Si el almacenamiento de referencias circulares debe ser apoyada, el segundo parámetro de JSON.stringify() podría usarse:

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

Sin embargo, la búsqueda de una solución eficiente para almacenar referencias circulares depende en gran medida las tareas que necesitan ser resueltos, y la restauración de estos datos no es trivial.

Ya hay algunas dudas sobre el SO frente a este problema: stringify (convertir en JSON) un objeto JavaScript con referencia circular

Answer 6

Hay una gran biblioteca que envuelve muchas soluciones por lo que incluso es compatible con los navegadores más antiguos llamados jStorage

Puede configurar un objeto

$.jStorage.set(key, value)

Y recuperarlo fácilmente

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

Answer 7

Uso de objetos JSON para el almacenamiento local:

// conjunto

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

// GET

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

// iteración de todas las claves de almacenamiento local y los valores

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

En teoría, es posible almacenar objetos con funciones:

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

Sin embargo, la función de serialización / deserialización no es fiable porque es dependiente de la implementación .

Answer 9

También puede anular los setItem(key,value) y getItem(key) Los métodos de almacenamiento por defecto para manejar objetos / matrices como cualquier otro tipo de datos. De esta manera, sólo tiene que llamar localStorage.setItem(key,value) y localStorage.getItem(key) como lo haría normalmente.

No he probado esto extensamente, pero ha aparecido a trabajar sin problemas para un proyecto pequeño que he estado jugando 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

llegué a este puesto después de golpear en otro post que se ha cerrado como un duplicado de éste - titulado 'cómo almacenar una matriz en localStorage?'. Lo cual está bien, excepto el hilo ni en realidad ofrece una respuesta completa en cuanto a cómo se puede mantener una matriz en localStorage -. Sin embargo, he conseguido diseñar una solución basada en la información contenida en los dos hilos

Así que si alguien es querer ser capaz de empujar / artículos de pop / cambio dentro de una matriz, y que quieren que la matriz almacenada en localStorage o de hecho sessionStorage, aquí van:

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

ejemplo de uso - almacenar cadenas simples en array localStorage:

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

Ejemplo de uso - el almacenamiento de objetos en la matriz 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étodos comunes para manipular matrices:

.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

Se recomienda el uso de una biblioteca de abstracción para muchas de las características que se describen aquí, así como una mejor compatibilidad. Un montón de opciones:

• jStorage o simpleStorage << mi preferencia
• localForage
• alekseykulikov / almacenamiento
• Lawnchair
• Store.js << otra buena opción
• OMG

Answer 12

Mejor haces funciona como setter y getter a localStorage , de esta manera usted tendrá un mejor control y no tendrá que repetir el análisis JSON y todo. Incluso va a manejar su (" ") clave cadena vacía / caso de datos sin problemas.

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

He modificado uno de respuesta con más votos un poco. Soy un fan de tener una sola función en lugar de 2 si no es necesario.

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

Además, si no se establece ningún valor, que está volviendo null en lugar de false. false tiene algún significado, null no lo hace.

Answer 14

Mejora en respuesta @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

Puede utilizar localDataStorage para almacenar de forma transparente JavaScript tipos de datos (Array, Boolean, Date, Float, Integer , cuerda y Object). También proporciona la ofuscación de datos de peso ligero, comprime automáticamente las cadenas, facilita la consulta por la clave (nombre), así como la consulta por valor (clave), y ayuda a cumplir almacenamiento compartido segmentado dentro del mismo dominio anteponiendo claves.

[Aviso Legal] yo soy el autor de la utilidad [/ RENUNCIA]

Ejemplos:

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

Como se puede ver, se respetan los valores primitivos.

Answer 16

Otra opción sería utilizar un plugin existente.

Por ejemplo persisto es un proyecto de código abierto que proporciona una interfaz fácil de localStorage / sessionStorage y automatiza la persistencia de campos de formulario (de entrada, botones de opción y casillas de verificación).

(exención de responsabilidad: yo soy el autor.)

Answer 17

Puede utilizar ejson para almacenar los objetos como cadenas.

  

EJSON es una extensión de JSON para apoyar más tipos. Es compatible con todos los tipos de JSON-seguros, así como:

     

  
• Fecha (JavaScript Date)
  
• binario (Uint8Array JavaScript o el resultado de EJSON.newBinary )
  
• tipos definidos por el usuario (ver EJSON.addType . Por ejemplo, < a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID se implementa de esta manera.)
  

     

Todos los serializaciones EJSON son también JSON válida. Por ejemplo, un objeto con una fecha y un tampón binario se serializado en EJSON como:

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

Aquí está mi envoltorio localStorage usando ejson

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

He añadido algunos tipos a mi envoltorio incluyendo expresiones y funciones regulares

Answer 18

http://rhaboo.org es una capa de azúcar localStorage que le permite escribir cosas como esta:

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

No utiliza JSON.stringify / análisis sintáctico porque eso sería inexacto y lento en objetos grandes. En su lugar, cada valor terminal tiene su propia entrada localStorage.

fácil adivinar que podría tener algo que ver con rhaboo; -)

Adrian.

Answer 19

Hice otro envoltorio minimalista con tan sólo 20 líneas de código para permitir usarlo como debería:

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

Para los usuarios Letra de imprenta dispuestos a establecer y obtener propiedades mecanografiadas:

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

Ejemplo de uso :

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

A continuación alguna versión Extented del código publicado por @danott

También va a implementar eliminar valor de localStorage y muestra cómo se añade una capa getter y setter así que en vez de

localstorage.setItem(preview, true)

puede escribir

config.preview = true

Bueno aquí eran ir:

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

Bien puede despojar a la parte alias con .bind(...). Sin embargo acabo de poner en ya que es muy bueno saber acerca de esto. Me tooked horas para averiguar por qué un get = localStorage.getItem; simples no funcionan

Answer 22

Hice una cosa que no rompa los objetos de almacenamiento existente, sino que crea un contenedor para que pueda hacer lo que quiera. El resultado es un objeto normal, no hay métodos, con acceso como cualquier objeto.

Lo hice.

Si quieres 1 propiedad localStorage sea mágica:

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

Si necesita varias:

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

Todo lo que haces a prop, o los objetos dentro de storage se guardará automáticamente en localStorage. Siempre estás jugando con un objeto real, por lo que puede hacer cosas como esta:

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

Y cada nuevo objeto dentro de un objeto seguido se realizará un seguimiento de forma automática.

El gran inconveniente: depende de Object.observe() por lo que tiene el apoyo del navegador muy limitado. Y no parece que va a venir para Firefox o Borde corto plazo.

Answer 23

Mira este

Digamos que usted tiene las siguientes películas matriz llamada:

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

Uso de la función stringify, la matriz de películas se puede convertir en una cadena utilizando la siguiente sintaxis:

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

Tenga en cuenta que mis datos se almacena en la clave llamada quentinTarantino.

Recuperación de los datos

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

Para convertir de una cadena de nuevo a un objeto, utilice la función de análisis de JSON:

var movies2 = JSON.parse(retrievedData);

Puede llamar a todos los métodos de arreglos en su movies2

Answer 24

Para almacenar un objeto, se puede hacer una cartas que se pueden utilizar para obtener un objeto desde una cadena a un objeto (no puede tener sentido). Por ejemplo

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

Esta técnica hará que algunos problemas si se utiliza la letra que se utiliza para separar el objeto, y también es muy experimental.

Answer 25

Un pequeño ejemplo de una biblioteca que utilizan localStorage para hacer el seguimiento de los mensajes recibidos de los contactos:

// 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 sólo puede almacenar pares clave-valor, donde tanto de las claves y los valores tienen que ser cadenas . Sin embargo, puede almacenar objetos serializando a JSON cuerdas y luego deserializar objetos a JS una vez descargados.

Por ejemplo:

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

Tenga en cuenta el hecho de que esto eliminará la cadena de prototipo establecido. Esto se muestra mejor mediante un ejemplo:

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

tengo este objeto JS * Quiero guardar esto en almacenamiento local de 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 }
];

puede tienda esto en almacenamiento local de HTML5 de esta manera, mediante el uso de JSON.stringify

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

Y ahora puedo conseguir este objeto desde el almacenamiento local por JSON.parsing .

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

Answer 28

Loop a través de almacenamiento local

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

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