SessionStorage และ LocalStorage ช่วยให้สามารถบันทึกคู่คีย์ / ค่าในเว็บเบราว์เซอร์ ค่าต้องเป็นสตริงและการบันทึกอ็อบเจ็กต์ js นั้นไม่สำคัญ

var user = {'name':'John'};
sessionStorage.setItem('user', user);
var obj = sessionStorage.user; // obj='[object Object]' Not an object

ทุกวันนี้คุณสามารถหลีกเลี่ยงข้อ จำกัด นี้ได้ด้วยการทำให้เป็นออบเจ็กต์เป็น JSON จากนั้นจึงยกเลิกการซีเรียลไลซ์เพื่อกู้คืนออบเจ็กต์ แต่ API การจัดเก็บข้อมูลผ่านsetItemและgetItemวิธีการเสมอ

sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

ฉันสามารถหลีกเลี่ยงข้อ จำกัด นี้ได้หรือไม่?

ฉันแค่อยากจะทำอะไรแบบนี้:

sessionStorage.user.name; // 'John'
sessionStorage.user.name = 'Mary';
sessionStorage.user.name // 'Mary'

ฉันได้ลองdefineGetterและdefineSetterวิธีในการสกัดกั้นการโทร แต่เป็นงานที่น่าเบื่อเพราะฉันต้องกำหนดคุณสมบัติทั้งหมดและเป้าหมายของฉันคือไม่ทราบคุณสมบัติในอนาคต

คุณสามารถใช้ accessors ที่ได้รับจาก Web Storage API หรือคุณสามารถเขียน wrapper / adapter จากปัญหาที่ระบุไว้ของคุณด้วย defineGetter / defineSetter ดูเหมือนว่าการเขียน wrapper / adapter นั้นใช้งานได้มากเกินไปสำหรับคุณ

ฉันไม่รู้จะบอกคุณตรงไหน บางทีคุณอาจประเมินความเห็นของคุณว่าอะไรคือ "ข้อ จำกัด ที่ไร้สาระ" Web Storage API เป็นที่เก็บคีย์ / ค่า

คุณไม่สามารถ 'stringify' วัตถุของคุณ ... จากนั้นใช้sessionStorage.setItem()ในการจัดเก็บการเป็นตัวแทนสตริงของวัตถุของคุณ ... แล้วเมื่อคุณต้องการมันsessionStorage.getItem()และจากนั้นใช้$.parseJSON()เพื่อดึงมันออกมา?

ตัวอย่างการทำงานhttp://jsfiddle.net/pKXMa/

การแก้ปัญหาคือการทำให้วัตถุแตกก่อนที่จะเรียก setItem บน sessionStorage

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);

นี่เป็นโซลูชันแบบไดนามิกที่ทำงานกับทุกประเภทของค่ารวมถึงวัตถุ:

class Session extends Map {
  set(id, value) {
    if (typeof value === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(id, value);
  }

  get(id) {
    const value = sessionStorage.getItem(id);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }
}

จากนั้น:

const session = new Session();

session.set('name', {first: 'Ahmed', last : 'Toumi'});
session.get('name');

ใช้กรณี:

 sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'});
 sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
 //Query first object
  sesssionStorage.getObj(1)
  //Retrieve date created of 2nd object
  new Date(sesssionStorage.getObj(1).date)

API

Storage.prototype.setObj = function(key, obj) {

        return this.setItem(key, JSON.stringify(obj))
    };
    
    Storage.prototype.getObj = function(key) {
        return JSON.parse(this.getItem(key))
    };

ที่จัดเก็บข้อมูลเซสชันไม่สามารถรองรับวัตถุที่กำหนดเองได้เนื่องจากอาจมีฟังก์ชั่นตัวอักษร (การปิดอ่าน) ซึ่งไม่สามารถสร้างขึ้นใหม่ได้หลังจากที่โหลดหน้าเว็บซ้ำ

    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);

คุณยังสามารถใช้ไลบรารีร้านค้าซึ่งทำหน้าที่ให้กับคุณด้วยความสามารถของ crossbrowser

ตัวอย่าง:

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})

คุณสามารถสร้างวิธีการ 2 แบบสำหรับการบันทึกและดึงข้อมูลวัตถุจากที่จัดเก็บข้อมูลเซสชัน

function saveSession(obj) {
  sessionStorage.setItem("myObj", JSON.stringify(obj));
  return true;
}

function getSession() {
  var obj = {};
  if (typeof sessionStorage.myObj !== "undefined") {
    obj = JSON.parse(sessionStorage.myObj);
  }
  return obj;
}

ใช้อย่างนี้: - รับวัตถุแก้ไขข้อมูลบางส่วนแล้วบันทึกกลับ

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);