نحوه ذخیره اشیا در localStorage یا sessionStorage در HTML5

در HTML5، localStorage و sessionStorage به عنوان روش‌هایی برای ذخیره اطلاعات در مرورگر استفاده می‌شوند. این دو مکانیزم ذخیره‌سازی، مقادیر را به صورت کلید/مقدار ذخیره می‌کنند، اما باید توجه داشت که فقط مقادیر رشته‌ای را می‌توان به طور مستقیم ذخیره کرد. به همین دلیل، وقتی شما سعی می‌کنید یک شی جاوا اسکریپت را مستقیماً ذخیره کنید، آن شی به طور خودکار به رشته تبدیل می‌شود و نتیجه‌ی آن یک رشته‌ی [object Object] خواهد بود.

برای ذخیره‌سازی صحیح اشیاء، می‌توانید از دو متد JSON.stringify() و JSON.parse() در جاوا اسکریپت استفاده کنید. با JSON.stringify() می‌توانید شی را به رشته‌ای تبدیل کرده، ذخیره کنید و با JSON.parse() می‌توانید آن را دوباره به شی تبدیل کنید. به عنوان مثال:

      var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// ذخیره‌سازی شیء در localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// بازیابی شیء از localStorage
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

console.log('retrievedObject: ', retrievedObject);

    

در این کد، ما اول شی را با JSON.stringify() به رشته تبدیل کرده و سپس آن را در localStorage ذخیره می‌کنیم. در نهایت، با استفاده از JSON.parse() می‌توانیم به راحتی رشته را به شی بازگردانیم.

برای سهولت بیشتر، می‌توانید متدهایی به پروتوتایپ Storage اضافه کنید تا کار با localStorage ساده‌تر شود:

      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); // در صورت عدم وجود کلید، null برمی‌گرداند
}

    

این متدها به شما این امکان را می‌دهند که به راحتی اشیا را ذخیره و بازیابی کنید:

      var userObject = { userId: 24, name: 'Jack Bauer' };
localStorage.setObject('user', userObject);

var retrievedUser = localStorage.getObject('user');
console.log(retrievedUser);