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методи перехоплення викликів, але його копітка робота, тому що я повинен визначити всі властивості, і моя мета - не знати майбутніх властивостей.

Або ви можете використовувати аксесуари, надані API веб-сховища, або ви можете написати обгортку / адаптер. З вашої заявленої проблеми з defineGetter / defineSetter звучить так, що написання обгортки / адаптера - це занадто велика робота для вас.

Я, чесно кажучи, не знаю, що тобі сказати. Можливо, ви могли б переоцінити свою думку щодо того, що таке "смішне обмеження". API веб-сховища - це саме те, що має бути, зберігання ключів / цінностей.

Не могли б ви не "пом'якшити" ваш об'єкт ... а потім використати 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']);

Ви також можете використовувати бібліотеку магазину, яка виконує її для вас із крос-браузерною здатністю.

приклад:

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