Сохранить объекты Javascript в sessionStorage

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 для перехвата вызовов, но это утомительная работа, потому что я должен определить все свойства, а моя цель - не знать будущих свойств.

Ответы

Ответ 1

Либо вы можете использовать аксессоры, предоставляемые API веб-хранилища, либо написать оболочку/адаптер. Из вашей заявленной проблемы с defineGetter/defineSetter звучит как написание обертки/адаптера, это слишком много для вас.

Я честно не знаю, что вам сказать. Возможно, вы могли бы пересмотреть свое мнение о том, что такое "смехотворное ограничение". API веб-хранилища - это то, что должно быть, хранилище ключей/значений.

Ответ 2

Не могли бы вы "стягивать" ваш объект... затем используйте sessionStorage.setItem() для хранения этого строкового представления вашего объекта... тогда, когда вам это нужно sessionStorage.getItem(), а затем используйте $.parseJSON(), чтобы вернуть его?

Рабочий пример http://jsfiddle.net/pKXMa/

Ответ 3

Решение состоит в том, чтобы скомпоновать объект перед вызовом setItem в sessionStorage.

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

Ответ 4

Это динамическое решение, которое работает со всеми типами значений, включая объекты:

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

Ответ 5

Случай использования:

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

Ответ 6

Хранилище сеансов не может поддерживать произвольный объект, поскольку оно может содержать функциональные литералы (замыкания на чтение), которые невозможно восстановить после перезагрузки страницы.

Ответ 7

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

Ответ 8

Вы также можете использовать библиотеку магазина, которая выполняет ее для вас с возможностью кроссбраузера.

пример:

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