在sessionStorage中保存Javascript对象

SessionStorage和LocalStorage允许在web浏览器中保存键/值对。值必须是一个字符串，保存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

方法来拦截调用，但这是一项乏味的工作，因为我必须定义所有属性，我的目标是不知道未来的属性。

您可以使用Web存储API提供的访问器，也可以编写包装器/适配器。从您声明的DefineGeter/defineSetter问题来看，编写包装器/适配器对您来说太多了

---

我真的不知道该告诉你什么。也许你可以重新评估你对什么是“荒谬的限制”的看法。Web存储API正是它的本意，一个键/值存储。

你能不能“字符串化”你的对象…然后使用

sessionStorage.setItem（）

来存储你的对象的字符串表示形式…然后当你需要它时，

sessionStorage.getItem（）

然后使用

$.parseJSON（）

将它取出来

工作示例

用例： 美国石油学会

---

解决方案是在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');

您还可以使用为您执行交叉划船功能的

例如：

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

---

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

您可以创建两种包装方法来保存和检索会话存储中的对象

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

---

对不起，如果我用了一个不恰当的词来形容“荒谬”。将其替换为“可能非常有趣”。我认为web存储是新web最令人兴奋的改进之一。但是我认为在值键映射中只保存字符串是一个限制。这看起来像是饼干的续集。我知道存储不仅是Javascript语言的规范，序列化对象可能是一个有趣的改进。你怎么看？如果JSON还不够，你可以自己编写对象序列化方法。我自己也想过。我想很多人都有。但是我不认为getter和setter方法是一个太大的负担。顺便提一下您可以使用JavaScript进行序列化和解析，MS最终支持与其他所有人相同的标准对象。对JSON和jQuery等包的需求正在迅速结束。我想我看不出有什么限制。如果你只拥有微不足道的对象，那么使用JSON.stringify和JSON.parse似乎有点过火，但是如果你拥有足够大的数据对象，这两种方法为你做了很多工作。“我能避免这个限制吗？”似乎是一个问题。不管限制与否，这个问题帮助我解决了一个问题，所以谢谢。这对我来说很有用。在调用$.parseJSON（）后，我得到了一个工作的Json对象。一些系统（如Web Api身份验证）以对象{propertyOneWithoutQuotes:，…propertyNWithoutQuotes:}的形式返回对象，需要通过“stringify”。如果有多个数据源，最好使用stringify来标准化数据。这是一个非常好的答案。最好使用JSON.stringify（）序列化对象并存储在sessionStorage中。然后，它使用$.parseJSON（）对字符串进行反序列化以获取对象。使用Storage.prototype.setObj似乎不是一个好主意。只需添加必需的。。确保在未首先检查浏览器是否支持此原型代码的情况下，不要添加此原型代码，也不要完全依赖它存储：

if（typeof（Storage）！=“undefined”）{/*浏览器支持此原型代码*/}

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

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