26 Soru: Nesneleri HTML5 localStorage uygulamasında saklama

tarafından oluşturulan soru Wed, May 17, 2017 12:00 AM

Bir JavaScript nesnesini HTML5 localStorage'da depolamak istiyorum, ancak nesnem görünüşte bir dizgeye dönüştürülüyor.

localStorage kullanarak ilkel JavaScript türlerini ve dizilerini depolayabilir ve alabilirim, ancak nesneler çalışmıyor gibi görünüyor. Onlar mı?

İşte kodum:

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

Konsol çıkışı:

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

setItem yönteminin, kaydetmeden önce girişi bir dizgeye dönüştürdüğü gibi görünüyor.

Bu davranışı Safari, Chrome ve Firefox’ta görüyorum, bu nedenle HTML5’i yanlış anladığımı varsayıyorum. Web Depolama özelliği, tarayıcıya özgü bir hata veya sınırlama değil.

http://www.w3.org/TR/html5/infrastructure.html . Ne dediğini tam olarak anlamadım, ama belki de sorunum nesnemin özelliklerinin numaralandırılmamasıyla (???)

ilgisi olmalı.

Kolay bir geçici çözüm var mı?


Güncelleme: W3C nihayetinde yapılandırılmış klonlama şartnamesiyle ilgili düşüncelerini değiştirdi ve uygulamaları eşleştirecek özellikleri değiştirmeye karar verdi. Bkz. https://www.w3.org/Bugs/Public/show_bug. cgi? id = 12111 . Dolayısıyla bu soru artık% 100 geçerli değil, ancak cevaplar hala ilgi çekici olabilir.

    
2294
  1. BTW, "yapılandırılmış klon algoritması" okuduğunuz doğrudur, bu sadece uygulamaların tamamlanmasından sonra teknik özelliklerin yalnızca dize değerlerinden buna değiştirildi. Hata yaptım bugzilla.mozilla.org/show_bug.cgi?id=538142 mozilla ile bu sorunu takip etmek için.
    2010-01-06 13: 30: 05Z
  2. Bu indexedDB için bir iş gibi görünüyor ...
    2013-08-02 02: 06: 09Z
  3. Bir Objects dizisini localStorage içine kaydetmeye ne dersiniz? Dizeye dönüştürülmekle aynı sorunla karşı karşıyayım.
    2017-06-09 19: 08: 26Z
  4. bunun yerine diziyi seri hale getirebilir misiniz? JSON stringify ile mağaza gibi, daha sonra yükleme üzerine tekrar ayrıştırmak?
    2018-03-12 06: 35: 24Z
  5. Javascript veri türlerini saydam bir şekilde saklamak için localDataStorage 'ı kullanabilirsiniz ( Dizi, Boolean, Tarih, Kayan Nokta, Tam Sayı, Dize ve Nesne)
    2018-06-11 00: 54: 45Z
26 Yanıtlar                              26                         

Apple'a bakın> , Mozilla ve tekrar Mozilla dokümantasyonu, işlevsellik sadece dize anahtarını /değerini işlemek için sınırlı görünüyor çiftleri.

Geçici bir çözüm, nesnenizden önce stringify olabilir saklar ve daha sonra geri aldığınızda ayrıştırır:

 
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));
    
2914
2019-06-15 04: 06: 54Z
  1. , herhangi bir meta verinin kaldırılacağını gözlemleyin. sadece anahtar /değer çiftleriyle bir nesne elde edersiniz, bu nedenle davranışı olan herhangi bir nesnenin yeniden yapılması gerekir.
    2013-10-07 18: 48: 42Z
  2. @ CMS, verilerin kapasiteyi aşması durumunda bazı istisnalar atabilir mi?
    2014-03-26 09: 27: 36Z
  3. ..., yalnızca dairesel referanslara sahip nesneler için geçerlidir, JSON.stringify() başvuruda bulunulan nesneyi, dizelediğimiz nesnede tam "içeriği" (tam olarak dizilmiş) olarak genişletir. Bakınız: stackoverflow.com/a/12659424/2044940
    2014-07-23 16: 54: 51Z
  4. Büyük dizileri veya nesneleri kullanmanız gerekiyorsa, bu yaklaşımla ilgili sorun performans sorunudur.
    2014-10-29 09: 35: 28Z
  5. @ oligofren doğru, ancak maja doğru bir şekilde önerildiği gibi eval () = > , bu kullanımın iyi bir tanesidir, fonksiyon kodunu kolayca alabilirsiniz = = gt; string olarak saklayın ve ardından eval () onu geri ekleyin :)
    2015-07-06 20: 03: 52Z

değişkeninde küçük bir gelişme:

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

kısa devre değerlendirmesi nedeniyle, getObject() hemen olacak > null Depoda değilse, key'u iade edin. Ayrıca SyntaxError, value (boş dize; "" bununla başa çıkamaz) ise JSON.parse() istisna atmaz.

    
595
2018-04-28 19: 40: 05Z
  1. Ben sadece hemen kullanamadığım için kullanımı hemen eklemek istiyorum: var userObject = { userId: 24, name: 'Jack Bauer' }; Ve ayarlamak için localStorage.setObject('user', userObject); Sonra depodan geri almak userObject = localStorage.getObject('user'); Hatta depolayabilirsiniz İsterseniz bir dizi nesne.
    2011-08-16 21: 38: 07Z
  2. Sadece boolean ifadesidir. İkinci bölüm, yalnızca bir tanesi doğru olduğunda değerlendirilir. Bu durumda, tüm ifadenin sonucu sağ kısımdan olacaktır. Boole ifadelerinin nasıl değerlendirildiğine dayanan popüler bir tekniktir.
    2011-11-01 21: 04: 19Z
  3. Burada yerel değişkenin noktasını ve kısayol değerlendirmesini göremiyorum (küçük performans iyileştirmeleri bir yana). key Yerel Depolama biriminde değilse, window.localStorage.getItem(key) null değerini döndürür - değil "Yasadışı erişim" istisnası atar ve JSON.parse(null) null değerini de döndürür - değil istisna ne Chromium 21'de ne de ES 5.1 bölüm 15.12.2’ye göre , çünkü String(null) === "null", JSON değişmezi olarak yorumlanabilir.
    2012-10-08 10: 20: 17Z
  4. Yerel Depolamadaki değerler her zaman ilkel dize değerleridir. Öyleyse bu kısayol değerlendirmesinin işleyişi, birisinin daha önce "" (boş dize) depolamasıdır. Bunun nedeni, false ve JSON.parse("")'a dönüştüren SyntaxError'a bir istisna atacağı için adlandırılmaz.
    2012-10-08 10: 42: 24Z
  5. IE8’de çalışmaz, bu nedenle, eğer desteklemeniz gerekiyorsa, onaylanmış yanıttaki işlevleri kullanmak daha iyidir.
    2013-01-16 12: 15: 23Z

Storage nesnesini şu kullanışlı yöntemlerle genişletmeyi yararlı bulabilirsiniz:

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

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

Bu şekilde, API'nin altında yalnızca dizeleri desteklese de, gerçekten istediğiniz işlevselliği elde edersiniz.

    
206
2010-01-06 04: 42: 47Z
  1. CMS'nin bir işleve yaklaşımı iyi bir fikirdir, sadece bir özellik sınaması gerekir: Biri JSON.stringify, biri JSON.parse, diğeri localStorage öğesinin bir nesneyi ayarlayıp ayarlayamadığını test edin. Ana bilgisayar nesnelerini değiştirmek iyi bir fikir değildir; Bunu localStorage.setObject olarak değil ayrı bir yöntem olarak görmeyi tercih ederim.
    2010-12-09 01: 28: 14Z
  2. Bu getObject(), saklanan değer SyntaxError ise "" istisna atar, çünkü JSON.parse() bunun üstesinden gelemez. Ayrıntılar için Guria'nın cevabını düzenlediğime bakın.
    2012-10-08 10: 45: 56Z
  3. Sadece iki sentim, ancak satıcı tarafından sağlanan nesneleri bu şekilde genişletmek iyi bir fikir değil, kesinlikle eminim.
    2014-07-06 18: 54: 40Z

Depolama nesnesini genişletmek harika bir çözümdür. API’m için, localStorage için bir cephe oluşturdum ve sonra bir nesne olup olmadığını kontrol ederken ve alırken kontrol ediyorum.

 
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;
  }
}
    
68
2013-10-25 16: 32: 44Z
  1. Bu neredeyse ihtiyacım olan şeydi. Yorumdan önce if (value == null) {return false} eklemek zorunda kaldı, aksi takdirde localStorage üzerindeki bir anahtarın varlığını denetlerken hatayla sonuçlandı.
    2012-03-08 20: 09: 48Z
  2. Bu aslında oldukça iyi. @FrancescoFrapporti ile aynı fikirdeyim, eğer boş değerler için bir if 'ye ihtiyacınız var. Ayrıca bir '|| değer [0] == "[" 'orada bir dizi olduğunda test edin.
    2012-03-13 00: 06: 59Z
  3. İyi nokta, bunu düzenleyeceğim. Boş bölüme ihtiyacınız olmasa da, eğer istersen üç tane tavsiye ederim ===. JSHint veya JSLint kullanıyorsanız, ==.
    kullanmaya karşı uyarılırsınız.
    2012-11-02 15: 15: 19Z
  4. Ve ninja olmayanlar için (benim gibi), birileri lütfen bu yanıt için bir kullanım örneği verebilir mi? Bu mu: data.set('username': 'ifedi', 'fullname': { firstname: 'Ifedi', lastname: 'Okonkwo'});?
    2015-06-20 08: 13: 34Z
  5. Evet gerçekten! Kaşıkla beslenme isteğimi aştığımda, test etmek için kodu aldım ve aldım. Bence bu cevap harika çünkü 1) Kabul edilen cevaptan farklı olarak, string veri üzerinde belirli kontroller yapmak zaman alıyor ve 2) Bir sonraki cevaptan farklı olarak, yerel bir nesneyi genişletmiyor.
    2015-06-20 08: 27: 38Z

Stringify tüm sorunları çözmüyor

Buradaki yanıtlar, JavaScript'te mümkün olan tüm türleri kapsamaz gibi görünüyor, bu nedenle, onlarla doğru şekilde nasıl başa çıkılacağına ilişkin bazı kısa örnekler:

 
//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"
İşlevleri saklamak için

önermiyorum , çünkü eval() kötüdür, güvenlik, optimizasyon ve hata ayıklama ile ilgili sorunlara yol açabilir.         Genelde, eval() asla JavaScript kodunda kullanılmamalıdır.

Özel üyeler

Nesneleri depolamak için JSON.stringify() kullanmanın sorunu, bu fonksiyonun özel üyeleri seri hale getirememesidir. Bu sorun .toString() yönteminin üzerine yazılarak çözülebilir (bu, web depolama alanında veri depolanırken örtük olarak adlandırılır):

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

Dairesel referanslar

stringify ile ilgilenemeyen başka bir sorun da dairesel referanslardır:

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

Bu örnekte, JSON.stringify(), bir TypeError "Dairesel yapıyı JSON'a dönüştürme" atacaktır.         Dairesel referansların kaydedilmesi desteklenmeli ise, JSON.stringify()'un ikinci parametresi kullanılabilir:

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

Ancak, dairesel referansları depolamak için etkili bir çözüm bulmak, çözülmesi gereken görevlere büyük ölçüde bağlıdır ve bu tür verileri geri yüklemek de önemsiz değildir.

Bu problemle ilgili SO konusunda zaten bir soru var: Stringify (bir JSON'a dönüştür), dairesel referanslı bir JavaScript nesnesini dize edin

    
59
2017-05-23 12: 02: 49Z

Pek çok çözümü kapsayan harika bir kütüphane var, böylece jStorage adlı eski tarayıcıları bile destekliyor p>

Bir nesne ayarlayabilirsiniz

 
$.jStorage.set(key, value)

Kolayca alın

 
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
    
51
2018-03-27 03: 14: 53Z
  1. $geçerli değil !!!
    2016-08-30 00: 57: 28Z
  2. @ SuperUberDuper jStorage, Prototip, MooTools veya jQuery gerektirir
    2016-08-30 23: 02: 32Z

JSON nesnelerini yerel depolama için kullanma:

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

//Tüm yerel saklama anahtarlarının ve değerlerinin yinelenmesi

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

//SİL

 
localStorage.removeItem('us');
delete window.localStorage["us"];
    
33
2017-02-17 15: 09: 15Z

Teoride, işlevleri olan nesneleri depolamak mümkündür:

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

Ancak, İşlev seri hale getirme /seri hale getirme işlemi güvenilir değil çünkü uygulamaya bağımlı /a>.

    
27
2012-10-08 16: 14: 26Z
  1. İşlev serileştirme /seri hale getirme güvenilmez çünkü uygulamaya bağımlıdır . Ayrıca, c.f[k] = escape(a[k]);'u Unicode güvenli c.f[k] = encodeURIComponent(a[k]); ve eval('b.' + k + ' = ' + unescape(data.f[k])); ile b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")"); ile değiştirmek istiyorsunuz. Parantezler gereklidir, çünkü işleviniz doğru şekilde seri hale getirilirse, geçerli olmadığı gibi anonim olma ihtimali yüksektir /deyim /(yani eval()), aksi takdirde SyntaxError istisna atar).
    2012-10-08 10: 54: 19Z
  2. Ve typeof bir operatörü , bir işlevmiş gibi yazmayın. typeof(a[k])'u typeof a[k] ile değiştirin.
    2012-10-08 10: 57: 19Z
  3. Önerilerimi uygulama ve yaklaşımın güvenilmezliğini vurgulamanın yanı sıra, aşağıdaki hataları da düzelttim: 1. Tüm değişkenler bildirilmedi. 2. for - in kendi özellikleri için filtrelenmedi. 3. Referanslama dahil kod stili tutarsızdı.
    2012-10-08 16: 17: 41Z
  4. @ PointedEars Bu ne kadar fark eder? teknik özellik şöyle der: the use and placement of white space, line terminators, and semicolons within the representation String is implementation-dependent. İşlevsel farklılıklar görmüyorum.
    2014-01-06 19: 34: 47Z
  5. @ Michael Alıntı yaptığınız bölüm Note *in particular* that … ile başlar. Ancak, iade değeri belirtimi An implementation-dependent representation of the function is returned. This representation has the syntax of a FunctionDeclaration. ile başlar. Dönüş değeri function foo () {} olabilir - bir uygun uygulama olduğu varsayılır.
    2014-01-11 13: 17: 38Z

Diğer veri türleri gibi nesneleri /dizileri işlemek için varsayılan Depolama setItem(key,value) ve getItem(key) yöntemlerini de geçersiz kılabilirsiniz. Bu şekilde, localStorage.setItem(key,value)’u arayabilir veNormalde yaptığınız gibi localStorage.getItem(key).

Bunu kapsamlı bir şekilde test etmedim, ancak baktığım küçük bir proje için sorunsuz çalışıyor gibi görünüyordu.

 
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);
  }
}
    
22
2011-04-26 15: 42: 43Z
  1. Yerel /yerleşik nesne API'lerini değiştirmek kötü bir uygulama olarak kabul edilir. Diğer çözümler için diğer cevaplara bakın.
    2011-09-07 12: 32: 21Z
  2. Güzel, şartnameye bağlı hiçbir kitaplık kullanmak istemediğinizi varsayarsak.
    2014-06-08 14: 07: 34Z

Bu yazıya, bunun bir kopyası olarak kapatılmış olan başka bir yazıya tıkladıktan sonra - 'bir yerel dizide nasıl bir dizi depolanır?' başlıklı makaleye ulaştım. Her iki iş parçacığı haricinde sorun değil aslında localStorage'da bir diziyi nasıl koruyabileceğinize dair tam bir cevap vermez - ancak her iki iş parçasında bulunan bilgilere dayanarak bir çözüm üretmeyi başardım.

Yani başka biri bir dizideki öğeleri itmek /pop /shift yapmak istiyorsa ve bu dizinin localStorage veya gerçekten sessionStorage içinde depolanmasını istiyorsa, işte başlıyorsunuz:

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

example use - basit dizeleri localStorage dizisinde depolamak:

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

example use - sessionStorage dizisinde nesneleri depolamak:

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

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

dizileri işlemek için yaygın yöntemler:

 
.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
    
21
2014-05-07 14: 07: 26Z
  1. Bu, localStorage veya sessionStorage öğesinde depolanan dizileri işlemek için çok kullanışlı bir yöntem kümesidir ve çekildiğinden çok daha fazla kredi hak ediyor. @Andy Lorenz Paylaşmaya zaman ayırdığınız için teşekkür ederiz!
    2017-08-21 08: 19: 13Z

Burada tartışılan özelliklerin çoğunun yanı sıra daha iyi uyumluluk için bir soyutlama kitaplığı kullanmanızı öneririz. Birçok seçenek:

13
2015-07-01 23: 13: 24Z

localStorage 'a ayarlayıcı ve alıcı olarak işlevlerini daha iyi yaparsanız, bu şekilde daha iyi kontrol sahibi olacaksınız ve JSON ayrıştırma işlemini ve tümünü tekrar etmeniz gerekmeyecek. ("") boş dize anahtarınızı /veri durumunuzu sorunsuz bir şekilde ele alır.

 
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'} */
    
11
2018-10-05 12: 15: 17Z

En çok oy alan yanıtlardan birini biraz değiştirdim. Gerekmediğinde 2 yerine tek işlevli bir hayranıyım.

 
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

Ayrıca, bir değer ayarlanmadıysa, null yerine false döndürür. false'un bir anlamı var, null'un anlamı yok.

    
8
2016-06-23 11: 28: 07Z
  1. localStorage API'sinin aksine, kütüphanem olmayan bir anahtar değeri almaya çalışırken tanımsız değerini döndürüyor. yanlış 'ın anlamı olduğunu kabul ediyorum, ancaköyleyse null . null olarak ayarlanan bir değişken herhangi bir değerin bulunmadığı (ancak belirlenir ) iken, tanımsız ise olmayan başlatıldı .
    2018-01-22 17: 35: 29Z

@Gurya'nın yanıtındaki gelişme:

 
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;
    }
};
    
6
2014-09-22 20: 34: 19Z

Javascript veri türlerini (Array, Boolean, Date, Float, Integer) şeffaf bir şekilde saklamak için localDataStorage adresini kullanabilirsiniz. , Dize ve Nesne). Ayrıca, hafif veri gizliliği sağlar, dizeleri otomatik olarak sıkıştırır, sorguyu (ad) yanı sıra sorguyu (anahtar) değerine göre sorgulamayı kolaylaştırır ve aynı alan içinde bölümlere ayrılmış paylaşılan depolamayı anahtar önekiyle zorlamaya yardımcı olur.

[YASAL UYARI] Ben yardımcı programın yazarıyım [/YASAL UYARI]

Örnekler:

 
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

Görebileceğiniz gibi ilkel değerlere saygı duyulur.

    
5
2017-07-17 17: 03: 22Z
  1. Bu mükemmel bir kaynak ve tam da ihtiyacım olan şey. AngularJS ile İyonik uygulamalar yapıyorum, burada yerel Javascript nesnelerini localStorage içine kaydetmem gerekiyor ve bu noktaya kadar sadece JSON.parse ve JSON.stringify yapıyordum, ve çalışıyor, fakat bu biraz daha zahmetli sadece bunun gibi bir yardımcı programı kullanmak için. Bunu deneyeceğim.
    2018-01-21 03: 30: 06Z

Başka bir seçenek var olan bir eklentiyi kullanmak olabilir.

Örneğin persisto , localStorage /sessionStorage ve otomatiklerine kolay bir arayüz sağlayan açık kaynaklı bir projedir form alanlarının kalıcılığı (giriş, radyo düğmeleri ve onay kutuları).

 persisto özellikler

(Feragatname: Ben yazarım.)

    
4
2016-06-16 19: 55: 20Z
  1. Hala benioku üzerinde çalışıyorum, ancak benim sürüm göründüğü gibi gerektirmez jQuery, ancak jQuery element Objects ile başa çıkmak için bir alternatif sunar. Yakın gelecekte daha fazla ekleyeceğim, daha fazla çalışacağım için, farklı jQuery Nesnelerini daha iyi işlemesine yardımcı olmak ve kalıcı veriler gibi şeyleri sürdürmek için. Ayrıca, daha basit bir çözüm sunmaya çalışmak için + 1! Ayrıca, localStroage'un tüm geleneksel yöntemlerini kullanır; exp: var lsh = new localStorageHelper(); lsh.setItem('bob', 'bill'); Ayrıca olaylar içerir.
    2016-07-11 19: 28: 11Z

Nesneleri dizeler olarak saklamak için ejson kullanabilirsiniz.

  

EJSON, daha fazla türü desteklemek için JSON'un bir uzantısıdır. Tüm JSON güvenli türlerini ve ayrıca:

'ı destekler.      
  • Tarih (JavaScript Date)
  •   
  • İkili (JavaScript Uint8Array veya EJSON.newBinary ) sonucu /) li>   
  • Kullanıcı tanımlı türler (bkz. EJSON.addType . a href = "https://docs.meteor.com/api/ejson.html#mongo_object_id" rel = "nofollow"> Mongo.ObjectID bu şekilde uygulanır.)
  •   

Tüm EJSON serileştirmeleri de geçerlidir JSON. Örneğin, tarih ve ikili arabellek içeren bir nesne EJSON'da şöyle seri hale getirilir:

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

İşte yerel Depolama paketimkullanma başına ejson

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

Normal ifadeler ve işlevler dahil paketleyicime bazı türler ekledim

    
4
2016-07-28 15: 41: 31Z

http://rhaboo.org , bunun gibi şeyler yazmanıza izin veren bir localStorage şeker katmanıdır:

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

JSON.stringify /parse öğesini kullanmaz, çünkü bu büyük nesnelerde yanlış ve yavaş olacaktır. Bunun yerine, her terminal değerinin kendi localStorage girişi vardır.

Muhtemelen rhaboo ile bir ilgim olabileceğini tahmin edebilirsiniz ;-)

Adrian.

    
3
2014-10-01 11: 14: 11Z

Olması gerektiği gibi kullanılmasına izin vermek için yalnızca 20 satır kod içeren başka bir minimalist sarmalayıcı yaptım:

 
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

    
3
2016-09-28 10: 30: 11Z

Typescript kullanıcıları için yazılı özellikleri ayarlamak ve almak isteyen kullanıcılar için:

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

Örnek kullanım :

 
// 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");
    
2
2018-05-30 11: 06: 17Z

Burada, @danott tarafından yayınlanan kodun genişletilmiş bir sürümü

Ayrıca yerel depodan gelen sil değerini de uygular ve bunun yerine bir Getter ve Setter katmanının nasıl ekleneceğini gösterir.

localstorage.setItem(preview, true)

yazabilirsin

config.preview = true

Tamam işte gitti:

 
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

Diğer adı .bind(...) ile soyunabilirsiniz. Ancak ben sadece bunu koymak gerçekten güzel çünkü bu konuyu bilmek. Basit bir get = localStorage.getItem;'un neden işe yaramadığını öğrenmem saatlerimi aldı.

    
1
2015-02-10 20: 25: 37Z

Mevcut Depolama nesnelerini kırmayacak bir şey yaptım, ancak bir sarıcı oluşturarak istediğiniz şeyi yapabilirsiniz. Sonuç normal bir nesnedir, yöntem yokds, herhangi bir nesne gibi erişime sahip.

Yaptığım şey.

1 localStorage özelliğinin sihirli olmasını istiyorsanız:

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

Birkaç kişiye ihtiyacınız olursa:

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

prop’a yaptığınız her şey veya storage’un içindeki nesneler otomatik olarak localStorage’a kaydedilir. Her zaman gerçek bir nesneyle oynuyorsun, böylece böyle şeyler yapabilirsin:

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

Ve izlenen bir nesnenin içinde yer aldığı her yeni nesne otomatik olarak izlenir.

Çok büyük dezavantaj: Object.observe()’a bağlı olduğundan tarayıcı desteği çok sınırlı. Ve yakında herhangi bir zamanda Firefox veya Edge için geliyor gibi görünmüyor.

    
1
2015-11-28 20: 39: 41Z

Şuna bakın

Diyelim ki filmler adında bir dizi var.

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

stringify işlevini kullanarak, filmler diziniz aşağıdaki sözdizimi kullanılarak dizgeye dönüştürülebilir:

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

Verilerimin quentinTarantino adlı anahtarın altında depolandığına dikkat edin.

Verilerinizi Alma

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

Bir dizgeden bir nesneye dönüşmek için JSON ayrıştırma işlevini kullanın:

 
var movies2 = JSON.parse(retrievedData);

Filmlerinizdeki tüm dizi yöntemlerini arayabilirsiniz2

    
1
2015-12-04 06: 40: 59Z
  1. sadece bağlantı cevapları olduğunu unutmayın > cesareti kırılmışsa, SO cevapları bir çözüm arayışının bitiş noktası olmalıdır (zamanla bayatlanma eğilimi gösteren başka bir referans durdurucu). Lütfen bağlantıyı referans olarak tutarak buraya tek başına bir özet eklemeyi düşünün.
    2015-12-04 06: 23: 54Z
  2. Ayrıca, cevabınızın 1500'ün üzerinde oyu bulunan mevcut beş yıllık yanıttan başka bir şey sağlamadığını da unutmayın. Soruma cevap vermeye çalıştığınız için teşekkür ederim, ancak lütfen cevabınızın diğer eski cevapların ötesinde bir değer sağlayıp sağlamadığını kontrol edin.
    2015-12-04 19: 10: 23Z

Bir nesneyi saklamak için, bir nesneyi dizeden nesneye almak için kullanabileceğiniz bir harf yapabilirsiniz (anlam ifade etmeyebilir). Örneğin

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

Nesneyi bölmek için kullandığınız mektubu kullanırsanız bu teknik bazı hatalara neden olur ve çok deneyseldir.

    
1
2016-05-21 16: 48: 56Z

Kişilerden gelen mesajları izlemek için localStorage kullanan küçük bir kütüphane örneği:

 
// 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;
 }
    
1
2017-02-17 15: 07: 45Z

Yerel halktan atılan halkalar

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

retrievedData.forEach(function (item) {
   console.log(item.itemid);
});
    
- 9
2018-10-01 11: 31: 37Z
  1. Yerel Depolama bu şekilde çalışmıyor. Dizelerle sınırlıdır ... seri hale getirme gerekiyor.
    2017-04-01 20: 05: 10Z
kaynak yerleştirildi İşte