Armazenando objetos em HTML5 localStorage

Question

Eu gostaria de armazenar um objeto JavaScript em HTML5 localStorage, mas meu objetivo é, aparentemente, a ser convertida para uma string.

I pode armazenar e recuperar os tipos e matrizes de JavaScript primitivos usando localStorage, mas os objetos não parecem trabalho. Deveriam?

Aqui está o meu 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);

A saída do console é

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

Parece-me que o método setItem é converter a entrada para a cadeia antes de armazená-lo.

Eu vejo esse comportamento no Safari, Chrome e Firefox, por isso suponho que é a minha incompreensão do HTML5 web Storage spec, não um bug ou limitação. específicas do navegador

Eu tentei fazer o sentido do estruturado clone algoritmo descrito em http://www.w3.org/TR/html5/infrastructure.html . Eu não entendo completamente o que ele está dizendo, mas talvez meu problema tem a ver com as propriedades do meu objeto não ser enumeráveis ??(???)

Existe uma solução fácil?

---

Update: O W3C, eventualmente, mudaram de idéia sobre a especificação-clone estruturado, e decidiu mudar a especificação para corresponder às implementações. Consulte https://www.w3.org/Bugs/Public/show_bug. cgi? id = 12111 . Portanto, esta questão não é mais 100% válido, mas as respostas ainda pode ser do seu interesse.

Answer 1

Olhando para o a Apple , Mozilla e Mozilla documentação novamente , a funcionalidade parece ser limitada para lidar única chave corda / valor pares.

Uma solução pode ser a stringify seu objeto antes armazená-lo, e depois analisá-lo quando você recuperá-la:

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

Uma pequena melhoria em um 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);
}

Por causa curto-circuito avaliação , getObject() irá imediatamente null retorno se key não está no armazenamento. Ele também não vai lançar uma exceção SyntaxError se value é "" (a cadeia vazia; JSON.parse() não pode lidar com isso).

Answer 3

Você pode achar que é útil alargar o objeto de armazenamento com esses métodos práticos:

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

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

Desta forma você obter a funcionalidade que você realmente queria, embora debaixo da API suporta apenas strings.

Answer 4

O alargamento do objeto de armazenamento é uma solução incrível. Para o meu API, eu criei uma fachada para localStorage e, em seguida, verificar se ele é um objeto ou não durante a configuração e começar.

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 não resolve todos os problemas

Parece que as respostas aqui não cobrem todos os tipos que são possíveis em JavaScript, então aqui estão alguns exemplos de curta duração sobre como lidar com eles corretamente:

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

Eu não recomendo para armazenar funções porque eval() é mal pode levar a problemas em matéria de segurança, otimização e depuração. Em geral, eval() nunca deve ser usado no código JavaScript.

membros privados

O problema com o uso JSON.stringify() para armazenar objetos é, que esta função pode membros não serialise privadas. Este problema pode ser resolvido, substituindo o método .toString() (que é chamado implicitamente quando o armazenamento de dados no armazenamento 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);

referências circulares

Outra stringify problema não pode lidar com referências circulares:

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

Neste exemplo, JSON.stringify() irá lançar um TypeError "Convertendo estrutura circular para JSON" . Se armazenar referências circulares devem ser apoiadas, o segundo parâmetro de JSON.stringify() pode ser utilizado:

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

No entanto, encontrar uma solução eficiente para o armazenamento de referências circulares altamente depende das tarefas que precisam ser resolvidos, e restaurar esses dados não é trivial qualquer um.

Já há alguma pergunta sobre SO lidar com este problema: stringify (convertido para JSON) um objeto JavaScript com referência circular

Answer 6

Há uma grande biblioteca que envolve muitas soluções para que ele ainda suporta navegadores mais antigos chamados jStorage

Você pode definir um objeto

$.jStorage.set(key, value)

E recuperá-la facilmente

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

Answer 7

Usando objetos JSON para armazenamento 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);

// iteração de todas as chaves de armazenamento local e valores

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

// excluir

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

Answer 8

Em teoria, é possível armazenar objetos com funções:

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

Entretanto, a função de serialização / desserialização não é confiável porque é dependente de implementação .

Answer 9

Você também pode substituir o armazenamento setItem(key,value) e getItem(key) métodos padrão para objetos punho / matrizes como qualquer outro tipo de dados. Dessa forma, você pode simplesmente chamar localStorage.setItem(key,value) e localStorage.getItem(key) como faria normalmente.

Eu não testei este amplamente, mas apareceu para trabalhar sem problemas para um projeto pequeno eu fui mexer com.

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

Cheguei a este cargo depois de bater em outro post que foi fechada como uma duplicata deste - intitulado 'como armazenar uma matriz em localStorage?'. Que é bom, exceto nenhum thread realmente fornece uma resposta completa a respeito de como você pode manter um array em localStorage -. No entanto eu consegui criar uma solução baseada em informações contidas em ambos os tópicos

Então, se alguém está querendo ser capaz de empurrar / pop / itens de deslocamento dentro de uma matriz, e eles querem que essa matriz armazenada em localStorage ou mesmo sessionStorage, aqui vai:

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

exemplo de uso - armazenar cadeias de caracteres simples na matriz localStorage:

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

Exemplo de Uso - armazenar objectos na 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 comuns para manipular matrizes:

.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

Recomendamos o uso de uma biblioteca de abstração para muitas das características discutidas aqui, bem como uma melhor compatibilidade. Muitas opções:

• jStorage ou simpleStorage << minha preferência
• localForage
• alekseykulikov / storage
• Lawnchair
• Store.js << outra opção boa
• OMG

Answer 12

Melhor você faz funciona como setter e getter para localStorage , desta forma você vai ter um melhor controle e não terá que repetir a análise JSON e tudo. ele vai mesmo lidar com o seu (" ") vazio string chave / case de dados sem 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

Eu modificado um dos mais votados responder um pouco. Eu sou um fã de ter uma única função em vez de 2, se não é necessário.

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

Além disso, se nenhum valor for definido, ele está retornando null vez de false. false tem algum significado, null não.

Answer 14

Melhoria na resposta 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;
    }
};

Answer 15

Você pode usar localDataStorage para transparente armazenar tipos de dados javascript (Array, Boolean, Date, Float, Integer , string e Object). Ele também fornece ofuscação de dados leve, compacta automaticamente cordas, facilita a consulta pela chave (nome), bem como consulta por valor (key), e ajuda a reforçar o armazenamento compartilhado segmentado dentro do mesmo domínio prefixando chaves.

[AVISO LEGAL] Eu sou o autor do utilitário [/ AVISO LEGAL]

Exemplos:

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 você pode ver, os valores primitivos são respeitados.

Answer 16

Outra opção seria usar um plug-in existente.

Por exemplo persisto é um projeto open source que fornece uma interface fácil de localStorage / sessionStorage e automatiza persistência para campos do formulário (de entrada, botões de rádio e caixas de seleção).

(Disclaimer: Eu sou o autor.)

Answer 17

Você pode usar ejson para armazenar os objetos como strings.

EJSON é uma extensão do JSON para apoiar mais tipos. Ele suporta todos os tipos JSON-seguros, bem como:

• Date (Date JavaScript)
• (Uint8Array JavaScript ou o resultado de EJSON.newBinary ) binário
• Tipos definidos pelo usuário (ver EJSON.addType . Por exemplo, < a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID é implementado desta forma.)

serializations

Todos os EJSON também são JSON válido. Por exemplo, um objeto com uma data e um buffer binário seria serializado na EJSON como:

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

Aqui está o meu localStorage wrapper utilizando ejson

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

Eu adicionei alguns tipos para o meu invólucro incluindo expressões e funções regulares

Answer 18

http://rhaboo.org é uma camada de açúcar localStorage que permite escrever coisas 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');

Ele não usa JSON.stringify / parse porque isso seria impreciso e lento em grandes objetos. Em vez disso, cada valor terminal tem a sua própria entrada localStorage.

Você provavelmente pode adivinhar que eu poderia ter algo a ver com rhaboo; -)

Adrian.

Answer 19

Eu fiz uma outra embalagem minimalista com apenas 20 linhas de código para permitir a usá-lo como deveria:

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 usuários Dactilografado dispostos a definir e obter propriedades digitado:

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

Exemplo 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

Aqui alguma versão Extented do código postado por @danott

Ele também vai implementar Excluir valor de localStorage e mostra como adiciona uma camada Getter e Setter então ao invés de

localstorage.setItem(preview, true)

você pode escrever

config.preview = true

Ok aqui foram go:

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

Bem, você pode retirar a parte aliases com .bind(...). No entanto, eu só colocá-lo em uma vez que é muito bom saber sobre isso. I tooked me horas para descobrir por que um get = localStorage.getItem; simples não funcionam

Answer 22

Eu fiz uma coisa que não quebrar os objetos de armazenamento existente, mas cria um wrapper para que você possa fazer o que quiser. O resultado é um objeto normal, nenhum método, com acesso como qualquer objeto.

A coisa que eu fiz.

Se você quiser uma propriedade localStorage ser mágica:

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

Se você precisar de vários:

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

Tudo que você faz para prop, ou os objetos dentro storage será salvo automaticamente em localStorage. Você está sempre brincando com um objeto real, de modo que você pode fazer coisas como esta:

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

E a cada novo objeto dentro um objeto rastreado serão rastreadas automaticamente.

A grande desvantagem: que depende Object.observe() por isso tem muito limitado suporte ao navegador. E não parece que vai ser vir para o Firefox ou Borda em breve.

Answer 23

Olhe este

Vamos dizer que você tem a seguinte matriz chamados filmes:

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

Usando a função stringify, sua matriz de filmes pode ser transformado em uma string usando a seguinte sintaxe:

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

Observe que os meus dados estão sendo armazenados sob a chave chamada quentinTarantino.

Recuperando seus dados

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

Para converter de uma volta string para um objeto, use a função de JSON análise:

var movies2 = JSON.parse(retrievedData);

Você pode chamar todos os métodos de array em seu movies2

Answer 24

Para armazenar um objeto, você poderia fazer uma cartas que você pode usar para obter um objeto a partir de uma string para um objeto (não pode fazer sentido). Por exemplo

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 irá causar algumas falhas, se você usar a letra que você usou para dividir o objeto, e também é muito experimental.

Answer 25

Um pequeno exemplo de uma biblioteca que o uso localStorage para manter o controle de mensagens recebidas de contatos:

// 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ó pode armazenar pares chave-valor, onde ambas as chaves e os valores tem que ser strings . No entanto, você pode armazenar objeto de serialização-los para cadeias JSON e, em seguida, desserializar-los para JS objetos quando você recuperá-los.

Por exemplo:

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

Esteja ciente do fato de que isso irá remover a cadeia de protótipos estabelecida. Isto é melhor demonstrado através de um exemplo:

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

Eu tenho esse objeto JS * Eu quero armazenar isso em armazenamento HTML5 local

   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 Fechar isso em armazenamento HTML5 local , desta forma, usando JSON.stringify

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

E agora eu posso obter este objeto do armazenamento local por JSON.parsing .

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

Answer 28

Curva através localStorage

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

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