将Javascript对象保存在sessionStorage中

如何解决将Javascript对象保存在sessionStorage中

| SessionStorage和LocalStorage允许将键/值对保存在Web浏览器中。该值必须是一个字符串，并且save js对象并不简单。

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

如今，您可以通过将对象序列化为JSON，然后反序列化它们以恢复对象来避免这种限制。但是Storage 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方法来拦截呼叫，但这是一项繁琐的工作，因为我必须定义所有属性，而我的目标是不知道将来的属性。

解决方法

您可以使用Web Storage API提供的访问器，也可以编写包装器/适配器。从您所定义的defineGetter / defineSetter问题来看，听起来像编写包装器/适配器对您来说是太多的工作。老实说，我不知道该怎么说。也许您可以重新评估一下什么是“荒谬的限制”。 Web存储API就是它应该是的键/值存储。 , 您能否不'字符串化'您的对象...然后使用sessionStorage.setItem()存储对象的字符串表示形式...然后在需要时使用sessionStorage.getItem()，然后使用$.parseJSON()将其取回？工作示例http://jsfiddle.net/pKXMa/ , 解决方案是在调用sessionStorage上的setItem之前对对象进行字符串化。

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