Code
2023-03-03 05:00:00

如何在HTML5 localStorage/sessionStorage中存储对象

我想在HTML5 localStorage中存储一个JavaScript对象，但我的对象显然被转换为字符串。

我可以使用localStorage存储和检索原始JavaScript类型和数组，但对象似乎不起作用。他们应该吗？

这是我的代码：

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

控制台输出为

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

在我看来，setItem方法在存储输入之前将其转换为字符串。

我在Safari、Chrome和Firefox中看到了这种行为，所以我认为这是我对HTML5 Web存储规范的误解，而不是浏览器特定的错误或限制。

我已经试图理解2公共基础设施中描述的结构化克隆算法。我不完全理解它的意思，但也许我的问题与对象的财产不可枚举有关（？？？）。

有简单的解决方法吗？

更新：W3C最终改变了对结构化克隆规范的想法，并决定更改规范以匹配实现。请参阅12111–存储对象getItem（key）方法的规范与实现行为不匹配。因此，这个问题不再100%有效，但答案可能仍然令人感兴趣。

当前回答

下面是danott发布的代码的一些扩展版本：

它还将实现本地存储中的删除值，并显示如何添加Getter和Setter层，

localstorage.setItem（预览，true）

你可以写

config.preview=真

好了，我们来了：

var PT=Storage.prototype

if (typeof PT._setItem >='u')
  PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
  if (typeof value >='u') //..undefined
    this.removeItem(key)
  else
    this._setItem(key, JSON.stringify(value));
}

if (typeof PT._getItem >='u')
  PT._getItem = PT.getItem;
PT.getItem = function(key)
{
  var ItemData = this._getItem(key)
  try
  {
    return JSON.parse(ItemData);
  }
  catch(e)
  {
    return ItemData;
  }
}

// Aliases for localStorage.set/getItem
get = localStorage.getItem.bind(localStorage)
set = localStorage.setItem.bind(localStorage)

// Create ConfigWrapperObject
var config = {}

// Helper to create getter & setter
function configCreate(PropToAdd){
    Object.defineProperty( config, PropToAdd, {
      get: function ()    { return (get(PropToAdd)    )},
      set: function (val) {         set(PropToAdd, val)}
    })
}
//------------------------------

// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...

// Configuration Data transfer
// Set
config.preview = true

// Get
config.preview

// Delete
config.preview = undefined

嗯，你可以用.bind（…）去掉别名部分。不过，我只是把它放进去，因为知道这一点真的很好。我花了几个小时才弄明白为什么一个简单的get=localStorage.getItem；不工作。

2015-02-10 20:25:37

其他回答

我做了另一个只有20行代码的极简包装器，这样就可以使用它了：

localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey');   // --> true
localStorage.get('myKey');   // --> {a:[1,2,5], b: 'ok'}
localStorage.keys();         // --> ['myKey']
localStorage.remove('myKey');

https://github.com/zevero/simpleWebstorage

2016-09-28 10:30:11 
localStorage.setItem('obj',JSON.stringify({name:'Akash'})); // Set Object in localStorage
localStorage.getItem('obj'); // Get Object from localStorage

sessionStorage.setItem('obj',JSON.stringify({name:'Akash'})); // Set Object in sessionStorage
sessionStorage.getItem('obj'); // Get Object from sessionStorage
2021-12-16 18:33:41

下面是danott发布的代码的一些扩展版本：

它还将实现本地存储中的删除值，并显示如何添加Getter和Setter层，

localstorage.setItem（预览，true）

你可以写

config.preview=真

好了，我们来了：

var PT=Storage.prototype

if (typeof PT._setItem >='u')
  PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
  if (typeof value >='u') //..undefined
    this.removeItem(key)
  else
    this._setItem(key, JSON.stringify(value));
}

if (typeof PT._getItem >='u')
  PT._getItem = PT.getItem;
PT.getItem = function(key)
{
  var ItemData = this._getItem(key)
  try
  {
    return JSON.parse(ItemData);
  }
  catch(e)
  {
    return ItemData;
  }
}

// Aliases for localStorage.set/getItem
get = localStorage.getItem.bind(localStorage)
set = localStorage.setItem.bind(localStorage)

// Create ConfigWrapperObject
var config = {}

// Helper to create getter & setter
function configCreate(PropToAdd){
    Object.defineProperty( config, PropToAdd, {
      get: function ()    { return (get(PropToAdd)    )},
      set: function (val) {         set(PropToAdd, val)}
    })
}
//------------------------------

// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...

// Configuration Data transfer
// Set
config.preview = true

// Get
config.preview

// Delete
config.preview = undefined

嗯，你可以用.bind（…）去掉别名部分。不过，我只是把它放进去，因为知道这一点真的很好。我花了几个小时才弄明白为什么一个简单的get=localStorage.getItem；不工作。

2015-02-10 20:25:37

循环引用

在这个答案中，我专注于具有循环引用的仅数据对象（没有函数等），并开发maja和mathheadinclouds提到的想法（我使用了他的测试用例和我的代码短了几倍）。

实际上，我们可以使用带有适当替换符的JSON.stringify-如果源对象包含对某个对象的多个引用，或者包含循环引用，那么我们可以通过特殊路径字符串（类似于JSONPath）来引用它。

//JSON.strify具有circ-ref的对象的替换器函数refReplacer（）{设m=new Map（），v=new Map），init=null；返回函数（字段，值）{让p=m.get（this）+（Array.isArray（this）`[$｛field｝]“：”.“+字段）；让isComplex=value==对象（值）如果（isComplex）m.set（值，p）；让pp=v.get（value）||''；let path=p.replace（/未定义\.\？/，“”）；让val=pp`#REF:$｛pp[0]==“[”？“$”：“$.”｝$｛pp｝“：value；!初始化？（init=value）：（val===init？val=“#REF:$”：0）；if（！pp&&isComplex）v.set（value，path）；返回值；}}// ---------------//测试// ---------------//生成具有重复/循环引用的obj让obj={我：{五十： {v:“lorem”}，R： ｛v:“ipsum”｝},R：{五十： ｛v:“dolor”｝，R：{五十： {v:“坐”}，R： ｛v:“amet”｝}}}obj.R.L.uncle=对象L；obj.R..uncle=对象L；obj.R.L..uncle=obj.R.L；obj.R.R..uncle=obj.R.L；obj.L.L.uncle=对象R；obj.L.R.unncle=对象R；testObject=obj；让json=json.stringify（testObject，refReplacer（），4）；console.log（“测试对象\n”，testObject）；console.log（“带有JSONpath引用的JSON”，JSON）；

使用类似JSONpath的引用解析此类JSON内容：

//使用对象的JSONpath引用解析JSON内容函数parseRefJSON（json）{let objToPath=新映射（）；let pathToObj=新映射（）；let o=JSON.parse（JSON）；让遍历=（父级，字段）=>{让obj=父级；let path=“#REF:$”；if（字段！==未定义）{obj=父[字段]；path=objToPath.get（父）+（Array.isArray（父）`[$｛field｝]`：`$｛field？'。'+字段：''｝`）；}objToPath.set（obj，路径）；pathToObj.set（路径，对象）；let ref=路径目标获取（obj）；如果（ref）父[字段]=ref；for（让f在obj中）if（obj==对象（obj））遍历（obj，f）；}横向（o）；返回o；}// ---------------//测试1// ---------------让json=`{“L”：{“L”：{“v”：“lorem”，“叔叔”：{“L”：{“v”：“dolor”，“叔叔”：“#REF:$.L”},“R”：{“L”：{“v”：“坐”，“叔叔”：“#REF:$.L.L叔叔.L”},“R”：{“v”：“amet”，“叔叔”：“#REF:$.L.L叔叔.L”},“叔叔”：“#REF:$.L”}}},“R”：{“v”：“ipsum”，“叔叔”：“#REF:$.L.L叔叔”}},“R”：“#REF:$.L.L叔叔”}`;let testObject=parseRefJSON（json）；console.log（“测试对象\n”，testObject）；// ---------------//测试2// ---------------console.log（'来自mathheadinclouds的测试答案：'）；let recovered=测试对象；let obj={//原始对象我：{五十： {v:“lorem”}，R： ｛v:“ipsum”｝},R：{五十： ｛v:“dolor”｝，R：{五十： {v:“坐”}，R： ｛v:“amet”｝}}}obj.R.L.uncle=对象L；obj.R..uncle=对象L；obj.R.L..uncle=obj.R.L；obj.R.R..uncle=obj.R.L；obj.L.L.uncle=对象R；obj.L.R.unncle=对象R；[目标L.L.v===恢复L.L.v，目标L.R.v===恢复L.R.v，目标R.L.v===恢复的R.L.v，目标R.R.L.v===恢复的R.R.L.v，obj.R.R.R.v===恢复的R.R.R.v，obj.R.L.包含==obj.L，对象.R.R.uncle==对象L，obj.R.L.包含==obj.R.L，obj.R.R.包含==obj.R.L，对象.L.L.uncle==对象R，obj.L.R.包含==obj.R，recovered.R.L叔叔==已恢复.L，恢复.R.R.叔叔==恢复.L，恢复.R.R.L叔叔==恢复.R.L，恢复.R.R.R.叔叔==恢复.R.L，recovered.L.L叔叔==恢复。R，已恢复.L.R叔叔==已恢复.R].forEach（x=>console.log（'测试通过：'+x））；

要将生成的JSON内容加载/保存到存储中，请使用以下代码：

localStorage.myObject = JSON.stringify(testObject, refReplacer());  // Save
testObject = parseRefJSON(localStorage.myObject);                   // Load
2020-08-04 09:26:42

您可以使用ejson将对象存储为字符串。

EJSON是JSON的扩展，以支持更多类型。它支持所有JSON安全类型，以及：日期（JavaScript日期）二进制（JavaScript Uint8Array或EJSON.newBinary的结果）用户定义的类型（请参阅EJSON.addType。例如，Mongo.ObjectID就是这样实现的。）所有EJSON序列化也是有效的JSON。例如，具有日期和二进制缓冲区的对象将在EJSON中序列化为：{“d”：｛“$date”：1358205756553｝，“b”：｛“$binary”：“c3VyZS4=”｝}

这是我使用ejson的localStorage包装器

https://github.com/UziTech/storage.js

我在包装器中添加了一些类型，包括正则表达式和函数

2016-07-28 15:41:31

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1