保存sessionStorage中的Javascript对象

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

Answer 1

您可以使用Web Storage API提供的访问器，也可以编写包装器/适配器。 从你声明的问题与defineGetter / defineSetter是听起来像写一个包装/适配器对你来说太多的工作。

我真的不知道该怎么告诉你。 也许你可以重新评估一下什么是“荒谬的限制”。 Web存储API就是它应该是的关键/价值存储。

Answer 2

你能不能'串化'你的对象…然后使用sessionStorage.setItem()来存储你的对象的string表示…然后当你需要它sessionStorage.getItem() ，然后使用$.parseJSON()来获得它退出？

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

Answer 3

解决scheme是在sessionStorage上调用setItem之前对对象进行string化。

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

Answer 4

用例：

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

Answer 5

这是一个dynamic的解决scheme，适用于包括对象在内的所有值types：

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

Answer 6

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

Answer 7

您也可以使用商店图书馆为您提供交叉浏览function。

例如：

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