【问题标题】：Save Javascript objects in sessionStorage在 sessionStorage 中保存 Javascript 对象
【发布时间】：2011-09-05 19:40:35
【问题描述】：

SessionStorage 和 LocalStorage 允许在 Web 浏览器中保存键/值对。值必须是字符串，保存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 方法来拦截调用，但这是一项乏味的工作，因为我必须定义所有属性，而我的目标是不知道未来的属性。

【问题讨论】：

我自己也想过。我想很多人都有。但我不认为 getter 和 setter 方法是太大的负担。顺便提一句;您可以使用 JavaScript 进行序列化和解析，MS 最终支持与其他所有人相同的标准对象。对 JSON 和 jQuery 等软件包的需求正在迅速结束。
我想我没有看到限制。如果您只有微不足道的对象，那么使用 JSON.stringify 和 JSON.parse 似乎有点过头了，但如果您有足够大的数据对象，这两种方法会为您做很多工作。
"我可以避免这个限制吗？"好像是个问题
限制与否，这个问题帮我解决了一个问题，谢谢。

标签： javascript session-storage

【解决方案1】：

解决方案是在 sessionStorage 上调用 setItem 之前对对象进行字符串化。

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

【讨论】：

【解决方案2】：

你能不能'stringify'你的对象......然后使用sessionStorage.setItem()来存储你的对象的字符串表示......然后当你需要它时sessionStorage.getItem()然后使用$.parseJSON()把它找回来？

工作示例http://jsfiddle.net/pKXMa/

【讨论】：

这对我有用。调用 $.parseJSON() 后，我得到了一个有效的 Json 对象
一些系统如Web Api认证返回对象的形式为Object { propertyOneWithoutQuotes : "", ... propertyNWithoutQuotes : "" }，需要经过"stringify"。如果有多个来源，最好使用 stringify 来标准化数据。
这是一个很好的答案。最好使用 JSON.stringify() 序列化对象并存储在 sessionStorage 中。然后，它使用 $.parseJSON() 对字符串进行反序列化以获取对象。
刚试过你的小提琴，我得到了undefined undefined is undefined years old.

【解决方案3】：

您可以使用 Web Storage API 提供的访问器，也可以编写包装器/适配器。从您声明的defineGetter/defineSetter问题来看，编写包装器/适配器对您来说工作量太大。

老实说，我不知道该告诉你什么。也许您可以重新评估您对“可笑限制”的看法。 Web Storage API 正是它应有的样子，一个键/值存储。

【讨论】：

对不起，如果我使用了一个不恰当的词来表示“荒谬”。将其替换为“可能很有趣”。我认为 webStorage 是新网络中最令人兴奋的改进之一。但是我认为只在值键映射中保存字符串是一个限制。这似乎是饼干的续集。我知道 Storage 不仅是 Javascript 语言的规范，但序列化对象可能是一个有趣的改进。你怎么看？
如果 JSON 还不够，您可以随时编写自己的对象序列化方法。

【解决方案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))
    };

【讨论】：

我认为 javascript 的最佳实践之一是不对您不拥有的对象进行原型设计。使用 Storage.prototype.setObj 似乎是个坏主意。
只是添加强制性的.. 确保你不添加这个原型代码 - 并且完全依赖它 - 没有首先检查浏览器是否支持它存储：if (typeof (Storage) !== "undefined"){ /* browser supports it */ }

【解决方案6】：

会话存储不能支持任意对象，因为它可能包含在页面重新加载后无法重建的函数字面量（读取闭包）。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

您也可以使用store library，它会为您执行跨浏览器功能。

示例：

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

【讨论】：

【解决方案9】：

您可以创建 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);

【讨论】：