在 sessionStorage 中保存 Javascript 对象

Posted 2023-03-05

【中文标题】在 sessionStorage 中保存 Javascript 对象

【英文标题】：Save Javascript objects in sessionStorage

【发布时间】：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 似乎有点过头了，但如果您有足够大的数据对象，这两种方法会为您做很多工作。

"我可以避免这个限制吗？"好像是个问题

限制与否，这个问题帮我解决了一个问题，谢谢。

【参考方案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);