El almacenamiento de objetos en el local de HTML5
-
18-09-2019 - |
Pregunta
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.
Solución
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));
Otros consejos
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).
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.
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;
}
}
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
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")
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"];
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 .
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);
}
}
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
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
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'} */
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.
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;
}
};
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.
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.)
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
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.
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');
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);
}
}
// 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");
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
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.
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.
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
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.
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;
}
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
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);
Loop a través de almacenamiento local
var retrievedData = localStorage.getItem("MyCart");
retrievedData.forEach(function (item) {
console.log(item.itemid);
});