تخزين الكائنات في Localstorage HTML5

Question

أرغب في تخزين كائن JavaScript في HTML5 localStorage, ، ولكن يبدو أن كائني يتم تحويله إلى سلسلة.

يمكنني تخزين واسترداد أنواع الجافا سكريبت البدائية والمصفوفات باستخدام localStorage, ، ولكن الكائنات لا تبدو تعمل. يجب عليهم؟

إليك الرمز الخاص بي:

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

ناتج وحدة التحكم

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

يبدو لي مثل setItem الطريقة هي تحويل المدخلات إلى سلسلة قبل تخزينها.

أرى هذا السلوك في Safari و Chrome و Firefox، لذلك أفترض أنه سوء فهمي HTML5 ويب التخزين المواصفات، وليس علة أو قيود خاصة بالمتصفح.

لقد حاولت فهم استنساخ منظم الخوارزمية الموصوفة في http://www.w3.org/tr/html5/Infrasulture.html.. وبعد لا أفهم تماما ما يقوله، ولكن ربما تكون مشكلتي علاقة بممتلكات كائنتي غير قابلة للتنفيذ (؟؟؟)

هل هناك حل سهل؟

---

تحديث: غيرت W3C في النهاية عقولهم حول مواصفات استنساخ منظمة، وقررت تغيير المواصفات لتتناسب مع التطبيقات. يرى https://www.w3.org/bugs/public/show_bug.cgi؟id=12111.. وبعد لذلك لم يعد هذا السؤال 100٪ صالحا، لكن الإجابات لا تزال قد تكون ذات أهمية.

Answer 1

أنظر إلى تفاحة, موزيلا و موزيلا مرة أخرى وثائق، يبدو أن الوظيفة تقتصر على التعامل مع أزواج مفتاح السلسلة فقط.

يمكن أن يكون الحل البديل باتر كائنك قبل تخزينه، ثم تحليله لاحقا عند استرداده:

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

تحسن بسيط على البديل:

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

بسبب تقييم دائرة قصيرة, getObject() إرادة فورا إرجاع null إذا key ليس في التخزين. كما أنها لن ترمي SyntaxError استثناء إذا value يكون "" (السلسلة الفارغة JSON.parse() لا يمكن التعامل مع ذلك).

Answer 3

قد تجد أنها مفيدة لتوسيع كائن التخزين مع هذه الطرق المفيدة:

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

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

وبهذه الطريقة تحصل على الوظيفة التي تريدها حقا رغم أنه أسفل API يدعم السلاسل فقط.

Answer 4

تمديد كائن التخزين هو حل رائع. بالنسبة لفي API، قمت بإنشاء واجهة ل LocalStorage ثم تحقق مما إذا كان كائن أم لا أثناء الإعداد والحصول عليه.

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 لا يحل جميع المشاكل

يبدو أن الإجابات هنا لا تغطي جميع الأنواع الممكنة في جافا سكريبت، لذلك فيما يلي بعض الأمثلة القصيرة حول كيفية التعامل معها بشكل صحيح:

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

أنا لا أوصي لتخزين الوظائف بسبب eval() الشرير يمكن أن يؤدي إلى قضايا بشأن الأمن والتحسين والتصحيح. بشكل عام، eval() لا ينبغي أبدا استخدامها في رمز JavaScript.

أعضاء القطاع الخاص

المشكلة مع استخدام JSON.stringify() لتخزين الكائنات، أن هذه الوظيفة لا يمكن أن تسلسل أعضاء خاصين. يمكن حل هذه المشكلة عن طريق الكتابة فوق .toString() الطريقة (التي تسمى ضمنيا عند تخزين البيانات في تخزين الويب):

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

المراجع الدائرية

مشكلة اخرى stringify لا يمكن التعامل مع مراجع دائرية:

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

في هذا المثال، JSON.stringify() سوف رمي أ TypeError "تحويل بنية دائرية إلى JSON"وبعد إذا تم دعم تخزين المراجع الدائرية، فإن المعلمة الثانية لل JSON.stringify() قد تستخدم:

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

ومع ذلك، يعتمد العثور على حل فعال لتخزين المراجع الدائرية بشكل كبير على المهام التي تحتاج إلى حلها، واستعادة هذه البيانات ليست تافهة أيضا.

هناك بالفعل بعض الأسئلة في التعامل مع هذه المشكلة: خطوات (تحويل إلى JSON) كائن JavaScript مع مرجع دائري

Answer 6

هناك مكتبة رائعة تلتف العديد من الحلول حتى تؤيد حتى المتصفحات القديمة التي تسمى jstorage.

يمكنك تعيين كائن

$.jStorage.set(key, value)

واستردادها بسهولة

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

Answer 7

باستخدام كائنات JSON للتخزين المحلي:

//تعيين

var m={name:'Hero',Title:'developer'};
localStorage.setItem('us', JSON.stringify(m));

//احصل على

var gm =JSON.parse(localStorage.getItem('us'));
console.log(gm.name);

/ / التكرار لجميع مفاتيح التخزين المحلية والقيم

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

// حذف

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

Answer 8

من الناحية النظرية، من الممكن تخزين الكائنات مع وظائف:

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

ومع ذلك، فإن الدالة تسلسل / التحيز غير موثوق بها ل إنه يعتمد على التنفيذ.

Answer 9

يمكنك أيضا تجاوز التخزين الافتراضي setItem(key,value) و getItem(key) طرق للتعامل مع الكائنات / صفائف مثل أي نوع بيانات آخر. بهذه الطريقة، يمكنك ببساطة الاتصال localStorage.setItem(key,value) و localStorage.getItem(key) كما تفعل عادة.

لم أختبر ذلك على نطاق واسع، لكنه يبدو أنه يعمل دون مشاكل لمشروع صغير كنت العبث به.

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

وصلت إلى هذا المنشور بعد الضغط على وظيفة أخرى تم إغلاقها كنسخة مكررة من هذا - بعنوان "كيفية تخزين صفيف في LocalStorage؟" وهو ما يرام باستثناء أي موضوع يوفر بالفعل إجابة كاملة حول كيفية الحفاظ على صفيف في Localstorage - ومع ذلك، فقد تمكنت من صياغة حل بناء على المعلومات الواردة في كل من المواضيع.

لذلك إذا كان أي شخص آخر يرغب في أن تكون قادرا على دفع / بوب / تحول عناصر ضمن صفيف، فما يريدون مجموعة مخزنة في Localstorage أو Sessionstorage بالفعل، هنا تذهب:

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

مثال على الاستخدام - تخزين سلاسل بسيطة في صفيف Localstorage:

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

مثال على استخدام الكائنات في صفيف 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);

طرق شائعة لمعالجة المصفوفات:

.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

يوصي باستخدام مكتبة تجريد للعديد من الميزات التي تمت مناقشتها هنا وكذلك توافق أفضل. الكثير من الخيارات:

• jstorage. أو simplestorage. << تفضيلاتي
• LocalForage.
• alekseykulikov / التخزين
• كرسي حديقة
• store.js. << خيار جيد آخر
• يا إلهي

Answer 12

من الأفضل أن تقوم باتخاذ وظائف كمدس و Getter التخزين المحلي, وبهذه الطريقة سيكون لديك سيطرة أفضل ولن تضطر إلى تكرار تحليل JSON وجميعها. سوف تعامل حتى (" ") مفتاح سلسلة فارغة / حالة البيانات بسلاسة.

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

لقد قمت بتعديل إحدى الإجابات أعلى صوتا قليلا. أنا من محبي وجود وظيفة واحدة بدلا من 2 إذا لم تكن هناك حاجة إليها.

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

أيضا، إذا لم يتم تعيين قيمة، فهي تعود null بدلا من false. false لديه بعض المعنى، null لا.

Answer 14

تحسين إجابة 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

يمكنك استخدام localdatastorage. لتخزين أنواع بيانات JavaScript بشفافية (صفيف، منطقي، تاريخ، تعويم، عدد صحيح، السلسلة والكائن). كما يوفر توضيح بيانات خفيف الوزن، ثم يضغط الأوتار تلقائيا، ويسهل الاستعلام عن طريق المفتاح (الاسم) بالإضافة إلى الاستعلام عن طريق (المفتاح) قيمة (المفتاح)، ويساعد على فرض التخزين المشترك المجسم داخل نفس المجال بواسطة مفاتيح البادئة.

إخلاء المسئولية] أنا مؤلف الأداة المساعدة [/ إخلاء المسئولية

أمثلة:

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

كما ترون، يتم احترام القيم البدائية.

Answer 16

سيكون هناك خيار آخر لاستخدام البرنامج المساعد الحالي.

علي سبيل المثال persisto. هو مشروع مفتوح المصدر يوفر واجهة سهلة إلى LocalStorage / SessionStorage وأتمتة الثبات لحقول النماذج (المدخلات وأزرار الراديو وصانع الاختيار).

(إخلاء المسئولية: أنا المؤلف.)

Answer 17

يمكنك استخدام ejson. لتخزين الكائنات كسلاسل.

Ejson هو امتداد JSON لدعم المزيد من الأنواع. وهو يدعم جميع أنواع JSON-آمنة، وكذلك:

• تاريخ (جافا سكريبت Date)
• ثنائي (جافا سكريبت Uint8Array أو نتيجة ejson.newbinary.)
• أنواع المعرفة من قبل المستخدم (انظر ejson.addype.. وبعد علي سبيل المثال، mongo.objectid. يتم تنفيذه بهذه الطريقة.)

جميع تسلسل Ejson هي أيضا JSON صالحة. على سبيل المثال كائن مع تاريخ وتسليط المخزن المؤقت الثنائي في Ejson على النحو التالي:

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

هنا هو مجمع بلدي Localstorage باستخدام EJSON

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

أضفت بعض الأنواع إلى غلافي بما في ذلك التعبيرات والوظائف العادية

Answer 18

http://rhaboo.org. هو طبقة سكر محمولة تتيح لك كتابة أشياء مثل هذا:

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 / تحليل لأن ذلك سيكون غير دقيق وبطء على كائنات كبيرة. بدلا من ذلك، تحتوي كل قيمة الطرفية على إدخال Localstorage الخاص به.

ربما يمكنك تخمين أنني قد يكون لدي ما يجب القيام به مع Laboo ؛-)

أدريان.

Answer 19

قمت بإلغاء غلاف ضئيل آخر مع 20 سطريا فقط للسماح باستخدامه كما هو:

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

للمستخدمين المحبوبين على استعداد لتعيين الخصائص المكتوبة والحصول عليها:

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

Answer 21

هنا بعض النسخة المتغيرة من الرمز المنشور بواسطةDanott

سوف ينفذ أيضا حذف القيمة من LocalStorage ويوضح كيفية إضافة طبقة Getter و Setter لذلك بدلا من

localstorage.setItem(preview, true)

يمكنك كتابة

config.preview = true

حسنا هنا أذهب:

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

حسنا، قد تجر قطاع الأسماء المستعارة .bind(...). وبعد ومع ذلك، فقط أضعها لأنه من الجيد حقا أن أعرف عن هذا. لقد أعوذتني على ساعات لمعرفة سبب بسيطة get = localStorage.getItem; لا تعمل

Answer 22

لقد قمت بشيء لا كسر كائنات التخزين الحالية، لكنه يخلق غلافا حتى تتمكن من فعل ما تريد. والنتيجة هي كائن طبيعي، لا طرق، مع الوصول مثل أي كائن.

الشيء الذي صنعته.

إذا كنت تريد 1 localStorage الممتلكات لتكون السحر:

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

إذا كنت بحاجة إلى عدة:

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

كل ما تفعله ل prop, ، أو الكائنات في داخل storage سيتم حفظها تلقائيا localStorage. وبعد كنت تلعب دائما بكائن حقيقي، حتى تتمكن من القيام بالأشياء مثل هذا:

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

وكل كائن جديد في داخل سيتم تتبع الكائن المتعقب تلقائيا.

الجانب السلبي الكبير جدا: ذلك يعتمد على Object.observe() لذلك لديها دعم متصفح محدود للغاية. ولا يبدو الأمر كما لو كان سيأتي إلى فايرفوكس أو حافة في أي وقت قريب.

Answer 23

انظروا الى هذا

دعنا نقول أن لديك مجموعة التالية تسمى الأفلام:

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

باستخدام وظيفة التوخين، يمكن تحويل صفيف أفلامك إلى سلسلة باستخدام بناء الجملة التالي:

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

لاحظ أن بياناتي يتم تخزينها تحت المفتاح يسمى Quentintarantino.

استرجاع بياناتك

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

للتحويل من سلسلة إلى كائن، استخدم وظيفة JSON PARSE:

var movies2 = JSON.parse(retrievedData);

يمكنك استدعاء جميع أساليب الصفيف على أفلامك 2

Answer 24

لتخزين كائن، يمكنك إجراء أحرف يمكنك استخدامها للحصول على كائن من سلسلة إلى كائن (قد لا يكون منطقيا). علي سبيل المثال

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

ستتسبب هذه التقنية في بعض مواطن الخلل إذا كنت تستخدم الرسالة التي استخدمتها لتقسيم الكائن، كما أنها تجريبية للغاية.

Answer 25

مثال صغير على مكتبة تستخدم LocalStorage لتتبع الرسائل المستلمة من جهات الاتصال:

// 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 يمكن فقط تخزين أزواج القيمة الرئيسية حيث كل من المفاتيح والقيم يجب أن تكون سلاسل. وبعد ومع ذلك، يمكنك تخزين الكائن عن طريق تسلسلها JSON الأوتار ثم التحيز بهم إلى كائنات JS عند استردادها.

علي سبيل المثال:

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

كن على دراية بحقيقة أن هذا سيزيل سلسلة النموذج الأولي المنشأ. يظهر هذا بشكل أفضل عبر مثال:

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

لدي كائن JS هذا * أريد تخزين هذا في HTML5 التخزين المحلي

   todosList = [
    { id: 0, text: "My todo", finished: false },
    { id: 1, text: "My first todo", finished: false },
    { id: 2, text: "My second todo", finished: false },
    { id: 3, text: "My third todo", finished: false },
    { id: 4, text: "My 4 todo", finished: false },
    { id: 5, text: "My 5 todo", finished: false },
    { id: 6, text: "My 6 todo", finished: false },
    { id: 7, text: "My 7 todo", finished: false },
    { id: 8, text: "My 8 todo", finished: false },
    { id: 9, text: "My 9 todo", finished: false }
];

أنا استطيع متجر هذا في HTML5 التخزين المحلي بهذه الطريقة، باستخدام json.stringify.

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

والآن يمكنني الحصول على هذا الكائن من التخزين المحلي json.parsing..

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

Answer 28

loop toyt localstorage.

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

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