Speichern von Objekten in HTML5 local

Question

Ich mag ein JavaScript-Objekt in HTML5 localStorage speichern, aber meine Aufgabe offenbar in einen String umgewandelt wird.

kann ich speichern und abzurufen primitive JavaScript-Typen und Arrays localStorage, aber Objekte scheinen nicht zu funktionieren. Sollten Sie?

Hier ist mein Code:

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

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

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

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

Die Konsolenausgabe ist

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

Es scheint mir, wie die setItem Methode wird die Eingabe in einen String umzuwandeln, bevor sie gespeichert werden.

Ich sehe dieses Verhalten in Safari, Chrome und Firefox, so dass ich davon ausgehen, es mein Mißverständnis des HTML5 Web Storage spec, nicht ein Browser-spezifische Fehler oder Einschränkung.

Ich habe versucht, Sinn für das machen strukturiert Klon Algorithmus beschrieben in http://www.w3.org/TR/html5/infrastructure.html . Ich verstehe nicht ganz, was es zu sagen, aber vielleicht mein Problem hat mit meinen Eigenschaften des Objekts nicht in der zählbaren (???)

zu tun

Gibt es eine einfache Abhilfe?

---

Update: Das W3C geändert schließlich ihre Meinung über die strukturierten-Klon-Spezifikation, und beschlossen, die Spezifikation zu ändern, um die Implementierungen zu entsprechen. Siehe https://www.w3.org/Bugs/Public/show_bug. cgi? id = 12111 . So ist diese Frage nicht mehr 100% gültig, aber die Antworten können noch von Interesse sein.

Answer 1

Mit Blick auf die von Apple , Mozilla und stringify Ihr Objekt vor Speicher, und es später analysieren, wenn Sie es abrufen:

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

Eine geringfügige Verbesserung auf einer 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);
}

Aufgrund der Kurzauswertung , getObject() wird sofort Rückkehr null wenn key nicht Lager ist. Es wird auch keine SyntaxError Ausnahme auslösen, wenn value "" ist (die leere Zeichenkette, JSON.parse() nicht damit umgehen kann).

Answer 3

Sie finden es möglicherweise sinnvoll, das Storage-Objekt mit diesen praktischen Methoden zu erweitern:

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

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

Auf diese Weise können die Funktionalität, die Sie wollte auch wirklich obwohl unter der API nur Strings unterstützt.

Answer 4

das Objekt Speicher Erweiterung ist eine wunderbare Lösung. Für meine API, ich habe eine Fassade für localstorage erstellt und dann prüfen, ob es ein Objekt ist oder nicht, während das Setzen und Empfangen.

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 löst nicht alle Probleme

Es scheint, dass die Antworten hier nicht alle Arten umfassen, die in JavaScript möglich sind, so sind hier einige kurze Beispiele, wie man mit ihnen umgehen richtig:

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

Ich empfehle zum Speichern von Funktionen nicht , weil eval() Übel zu Problemen führen in Bezug auf Sicherheit, Optimierung und Fehlersuche.         Im Allgemeinen eval() soll nie in JavaScript-Code verwendet werden.

Privat Mitglieder

Das Problem bei der Verwendung JSON.stringify() Objekte zum Speichern ist, dass diese Funktion nicht private Mitglieder serialise kann. Dieses Problem kann durch Überschreiben des .toString() Verfahrens gelöst werden (die implizit aufgerufen wird, wenn Daten in Web-speicherung):

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

Rund Referenzen

Ein weiteres Problem stringify kann nicht behandeln sind zirkuläre Referenzen:

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

In diesem Beispiel wird JSON.stringify() ein TypeError werfen "Konvertieren von Rundbau zu JSON" .         Wenn die Speicherung zirkuläre Referenzen unterstützt werden soll, könnte der zweite Parameter von JSON.stringify() verwendet werden:

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

Um jedoch eine effiziente Lösung zu finden für zirkuläre Referenzen hängt stark von den Aufgaben zu speichern, die gelöst werden müssen, und eine solche Wiederherstellung von Daten ist entweder nicht trivial.

Es gibt bereits einige Frage auf SO Umgang mit diesem Problem: Stringify (Umwandlung in JSON) ein JavaScript-Objekt mit kreisförmiger Referenz

Answer 6

Es gibt eine große Bibliothek, die viele Lösungen wickeln, so dass es auch älteren Browser unterstützt genannt jStorage

Sie können ein Objekt gesetzt

$.jStorage.set(key, value)

Und abrufen es leicht

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

Answer 7

Mit JSON-Objekte für die lokale Speicherung:

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

// Iteration aller lokalen Speicherschlüssel und Werte

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 der Theorie ist es möglich, Objekte mit Funktionen zum Speichern:

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

jedoch Funktion Serialisierung / Deserialisierung unzuverlässig ist, weil es die Implementierung abhängig ist .

Answer 9

Sie können auch die Standardspeicher setItem(key,value) und getItem(key) Methoden außer Kraft setzen Objekte / Arrays wie jede andere Datentypen zu handhaben. Auf diese Weise können Sie einfach anrufen localStorage.setItem(key,value) und localStorage.getItem(key) wie gewohnt.

ich diese extensiv nicht getestet, aber es hat sich gezeigt, ohne Probleme für ein kleines Projekt zu arbeiten, ich habe mit worden bastelt.

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

Ich habe in diesem Beitrag kam auf einen anderen Dienstposten nach der Kollision, die als ein Duplikat dieser geschlossen wurde - mit dem Titel ‚Wie ein Array in localstorage speichern?‘. Welches ist in Ordnung, außer eigentlich weder Thread eine vollständige Antwort auf die Frage stellt, wie man ein Array in localstorage halten kann -. Jedoch habe ich es geschafft, eine Lösung in beiden Threads enthalten basiert auf Informationen, Handwerk

Also, wenn jemand fehlt der Lage sein, schieben / pop / Shift-Elemente innerhalb eines Arrays, und sie wollen, dass Array in localstorage gespeichert oder in der Tat session, hier gehen Sie:

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

Beispiel für die Verwendung - Speichern von einfachen Strings in localstorage-Array:

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

Beispiel für die Verwendung - Speichern von Objekten in session Array:

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

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

gemeinsame Methoden zur Bearbeitung von Arrays:

.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

empfehlen eine Abstraktionsbibliothek für viele der Funktionen unter Verwendung diskutiert hier sowie eine bessere Kompatibilität. Es gibt viele Möglichkeiten:

• jStorage oder simpleStorage << meine Präferenz
• localForage
• alekseykulikov / storage
• Lawnchair
• Store.js << eine weitere gute Option
• OMG

Answer 12

Sie besser machen Funktionen wie Setter und Getter auf local , auf diese Weise eine bessere Kontrolle haben wird und nicht die JSON Parsen und alle zu wiederholen. es wird sogar handhaben Ihre (“„) leerer String key / Daten Fall reibungslos.

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

Ich habe eine der Top-gestimmt Antwort verändert ein wenig. Ich bin ein Fan von Einzelfunktion anstelle von 2, wenn es nicht gebraucht wird.

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

Auch wenn kein Wert festgelegt ist, wird es zurückkehrt null statt false. false eine Bedeutung hat, null nicht.

Answer 14

Verbesserung auf @Guria ‚s Antwort:

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

Sie können mit localDataStorage transparent JavaScript-Datentypen speichern (Array, Boolean, Datum, Float, Integer , String und Object). Es bietet auch Verschleierungs leichte Daten automatisch komprimiert Strings erleichtert Abfrage durch Schlüssel (Name) sowie Abfrage von (key) Wert und hilft durch das Vorsetzen Schlüssel segmentierten gemeinsam genutzten Speicher innerhalb derselben Domäne zu erzwingen.

[HAFTUNGSAUSSCHLUSS] Ich bin der Autor des utility [/ HAFTUNGSAUSSCHLUSS]

Beispiele:

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

Wie Sie sehen können, werden die ursprünglichen Werte eingehalten werden.

Answer 16

Eine andere Möglichkeit wäre ein vorhandenes Plugin zu verwenden.

Zum Beispiel persisto ist ein Open-Source-Projekt, die localstorage / session eine einfache Schnittstelle bietet und automatisiert Persistenz für Formularfelder (input, Optionsfelder und Kontrollkästchen).

(Disclaimer: Ich bin der Autor.)

Answer 17

Sie können mit ejson die Objekte als Zeichenfolgen speichern.

  

EJSON ist eine Erweiterung von JSON, um mehr Arten zu unterstützen. Es unterstützt alle JSON-safe-Typen, sowie:

     

  
• Datum (JavaScript Date)
  
• Binary (JavaScript Uint8Array oder das Ergebnis der EJSON.newBinary )
  
• Benutzerdefinierte Typen (siehe EJSON.addType . Beispiel: < a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID wird auf diese Weise implementiert.)
  

     

Alle EJSON Serialisierungen gelten auch JSON. Zum Beispiel ein Objekt mit einem Datum und einem binären Puffer würde in EJSON serialisiert werden als:

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

Hier ist mein local Wrapper ejson

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

Ich habe einige Arten meiner Wrapper einschließlich reguläre Ausdrücke und Funktionen

Answer 18

http://rhaboo.org ist eine Zuckerschicht, die localstorage Sie so schreiben Dinge können:

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

Es ist nicht JSON.stringify / Parse verwenden, weil das ungenau und langsam auf große Objekte sein würde. Statt dessen soll jeder Endwert seinen eigenen Eintrag hat localstorage.

Sie können sich wahrscheinlich vorstellen, dass ich etwas mit rhaboo zu tun haben könnte; -)

Adrian.

Answer 19

habe ich eine andere minimalistisch-Wrapper mit nur 20 Zeilen Code verwenden es, wie es zu erlauben sollte:

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

Für Typoskript Nutzer bereit zu setzen und typisierte Eigenschaften zu erhalten:

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

Beispiel der Verwendung :

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

Hier einige erweiterter Version des Codes von @danott geschrieben

Es wird auch implementieren löschen Wert von localstorage und zeigt, wie man einen Getter und Setter-Schicht fügt so anstelle von

localstorage.setItem(preview, true)

Sie können schreiben

config.preview = true

Okay, hier waren gehen:

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

Nun können Sie die Aliase Teil mit .bind(...) abzustreifen. Ich habe es aber nur in, da es wirklich gut ist, darüber zu wissen. Ich tooked mir Stunden, um herauszufinden, warum eine einfache get = localStorage.getItem; nicht funktionieren

Answer 22

habe ich eine Sache, die nicht die vorhandenen Speicherobjekte nicht bricht, sondern schafft einen Wrapper so können Sie tun, was Sie wollen. Das Ergebnis ist ein normales Objekt, keine Methoden, mit Zugang wie jedes Objekt.

Das, was ich gemacht.

Wenn Sie 1 localStorage Eigenschaft zu sein, Magie:

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

Wenn Sie mehr Vorteile:

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

Alles, was Sie zu tun prop, oder die Objekte innerhalb storage automatisch in localStorage gespeichert werden. Sie sind immer mit einem realen Objekt zu spielen, so dass Sie Dinge tun, wie folgt:

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

Und jedes neue Objekt innerhalb ein verfolgtes Objekt wird automatisch verfolgt werden.

Der sehr große Nachteil: es hängt von Object.observe() so ist es sehr begrenzte Browser-Unterstützung hat. Und es sieht nicht aus wie wird es in absehbarer Zeit für Firefox oder Edge kommen.

Answer 23

diesen Schau

Angenommen, Sie haben die folgenden Array namens Filme haben:

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

Mit der stringify Funktion, Ihre Filme Array in einen String umgewandelt werden kann, indem die folgende Syntax verwendet:

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

Beachten Sie, dass meine Daten im Rahmen der quentinTarantino genannt Schlüssel gespeichert wird.

Suchen Sie Ihre Daten

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

Um aus einer Zeichenfolge zu konvertieren zurück zu einem Objekt, verwenden Sie die JSON Parse-Funktion:

var movies2 = JSON.parse(retrievedData);

Sie können alle Feldmethoden auf Ihrem movies2 rufen

Answer 24

Um ein Objekt zu speichern, könnten Sie einen Buchstaben machen, dass Sie ein Objekt erhalten aus einer Zeichenfolge zu einem Objekt verwenden können (kann nicht sinnvoll). Zum Beispiel

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

Diese Technik wird einige Probleme verursachen, wenn Sie die Buchstaben verwenden, die Sie das Objekt geteilt verwendet, und es ist auch sehr experimentell.

Answer 25

Ein kleines Beispiel für eine Bibliothek, die localstorage für die Verfolgung von empfangenen Nachrichten von Kontakten verwenden:

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

local kann nur speichern Schlüssel-Wert-Paare, wo beide der Tasten und die Werte müssen Strings sein . Sie können jedoch Objekt speichern, indem sie die Serialisierung Strings JSON und deserialisieren sie dann zu JS Objekte, wenn Sie sie abgerufen werden.

Beispiel:

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

Seien Sie sich der Tatsache bewusst, dass dies die etablierten Prototypkette entfernt werden. Dies geschieht am besten durch ein Beispiel gezeigt:

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

Ich habe das JS Object * Ich möchte dies speichern in HTML5 lokalem Speicher

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

Ich kann speichern diese in HTML5 lokalen Speicher auf diese Weise unter Verwendung von JSON.stringify

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

Und jetzt kann ich dieses Objekt aus dem lokalen Speicher erhalten, indem JSON.parsing .

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

Answer 28

Schleife durch local

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

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