SessionStorage dan LocalStorage memungkinkan untuk menyimpan pasangan kunci / nilai di browser web. Nilai harus berupa string, dan menyimpan objek js tidak sepele.

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

Saat ini, Anda dapat menghindari batasan ini dengan membuat serialisasi objek ke JSON, dan kemudian membatalkan deserialisasi untuk memulihkan objek. Tetapi API Penyimpanan selalu melewati setItemdan getItemmetode.

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

Bisakah saya menghindari batasan ini?

Saya hanya ingin menjalankan sesuatu seperti ini:

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

Saya telah mencoba defineGetterdan defineSettermetode untuk mencegat panggilan tetapi itu pekerjaan yang membosankan, karena saya harus mendefinisikan semua properti dan target saya bukan untuk mengetahui properti masa depan.

Entah Anda dapat menggunakan pengakses yang disediakan oleh Web Storage API atau Anda bisa menulis pembungkus / adaptor. Dari masalah yang Anda nyatakan dengan defineGetter / defineSetter terdengar seperti menulis bungkus / adaptor terlalu banyak bekerja untuk Anda.

Sejujurnya aku tidak tahu harus berkata apa. Mungkin Anda bisa mengevaluasi kembali pendapat Anda tentang apa itu "batasan konyol". API Penyimpanan Web adalah apa yang seharusnya, toko kunci / nilai.

Tidak bisakah Anda 'merangkai' objek Anda ... lalu gunakan sessionStorage.setItem()untuk menyimpan representasi string objek Anda ... lalu ketika Anda membutuhkannya sessionStorage.getItem()dan kemudian gunakan $.parseJSON()untuk mengeluarkannya kembali?

Contoh kerja http://jsfiddle.net/pKXMa/

Solusinya adalah dengan mengencangkan objek sebelum memanggil setItem pada sessionStorage.

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

Ini adalah solusi dinamis yang bekerja dengan semua tipe nilai termasuk objek:

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

Kemudian :

const session = new Session();

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

Gunakan kasus:

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

Penyimpanan sesi tidak dapat mendukung objek sewenang-wenang karena mungkin berisi fungsi literal (penutupan baca) yang tidak dapat direkonstruksi setelah pemuatan ulang halaman.

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

Anda juga bisa menggunakan perpustakaan toko yang melakukannya untuk Anda dengan kemampuan crossbrowser.

contoh:

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

Anda dapat membuat 2 metode pembungkus untuk menyimpan dan mengambil objek dari penyimpanan sesi.

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

Gunakan seperti ini: - Dapatkan objek, modifikasi beberapa data, dan simpan kembali.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);