Speichern von Objekten in HTML5 local
-
18-09-2019 - |
Frage
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 tunGibt 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.
Lösung
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));
Andere Tipps
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).
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.
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;
}
}
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
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")
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"];
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 .
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);
}
}
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
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
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'} */
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.
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;
}
};
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.
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.)
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
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.
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');
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);
}
}
// 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");
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
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.
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.
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
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.
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;
}
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
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);
Schleife durch local
var retrievedData = localStorage.getItem("MyCart");
retrievedData.forEach(function (item) {
console.log(item.itemid);
});