使用 localStorage 中的嵌套数组对复杂对象进行字符串化和解析

水晶石榴石

我有一个非常复杂的字典对象,它由对象和数组的非常深的嵌套组合组成。

我使用自定义 deepCopyObject 函数在整个代码中制作对象的深层副本。这很好用,我只包含它,因为这是我能够在没有浅引用的情况下复制对象的唯一方法。

当我尝试使用 parse 和 stringify 从 localStorage 存储和检索它时,问题就出现了。下面的代码返回:

nextQuestion local_user_dict 是 [object Object] test.html:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1

下面的代码是通过从浏览器中的控制台复制对象并编辑键/值来构建的。我保留了所有结构,包括我没有包含的“空”值,但我认为是因为它是嵌套在对象中的数组。

我被告知 stringify 和 parse 应该适用于深度嵌套和复杂的对象,包括数组(虽然我在网上其他地方读过这不是真的)。如何正确传递此对象并从 localStorage 中检索它?

如果我在对象上使用我的深度复制功能,它可以正常工作并按原样显示,只有在从 localStorage 进行字符串化和解析时才会出现问题。

var test_dict = {
    "questions": {
        "obj1": {
            "words": [
                null,
                {
                    "test1": {
                        "test2": "test7",
                        "test3": "test6"
                    },
                    "test4": "test5"
                },
                {
                    "test8": {
                        "test9": 0,
                        "test10": "2",
                    },
                    "test11": [
                        null,
                        {
                            "test12": {
                                "no": 0,
                                "yes": 1
                            },
                            "test13": "test14"
                        },
                        {
                            "test15": {
                                "no": 0,
                                "yes": 1
                            },
                            "test16": "test17"
                        },
                        {
                            "test18": {
                                "no": 0,
                                "yes": 1
                            },
                            "test19": "test20"
                        }
                    ]
                }
            ]
        }
    }
}

localStorage.setItem('user_dict', deepCopyObject(test_dict))
let local_user_dict = localStorage.getItem('user_dict')
console.log('nextQuestion local_user_dict is ', local_user_dict)
let parsed_local_user_dict = JSON.parse(local_user_dict)
console.log('nextQuestion parsed_local_user_dict is ', parsed_local_user_dict)
user_dict = deepCopyObject(parsed_local_user_dict)
console.log('nextQuestion user_dict is ', user_dict)

function deepCopyObject(inObject) {
    let outObject, value, key
    if (typeof inObject !== "object" || inObject === null) {
        return inObject
    }
    outObject = Array.isArray(inObject) ? [] : {}
    for (key in inObject) {
        value = inObject[key]
        outObject[key] = deepCopyObject(value)
    }
    return outObject
}
德诺夫

localstorage 存储字符串。不是对象。

改变

localStorage.setItem('user_dict', deepCopyObject(test_dict))

localStorage.setItem('user_dict', JSON.stringify(test_dict))

并放弃副本。您实际上可以使用 JSON 解析和字符串化来复制对象。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用localStorage存储对象

在PHP中使用嵌套数组进行字符串解析

在localStorage中添加字符串数组,但不使用转义字符

使用 localstorage 更改嵌套对象的值

使用 localstorage 更改嵌套对象的值

使用localStorage中的数据填充对象

LocalStorage使用JavaScript从对象中删除项目

使用jQuery在localstorage中存储为数组

如何不使用localStorage进行重构?

使用LocalStorage键调用对象值

为什么localStorage不能作为对象使用?

使用localStorage编辑一组对象

解析localStorage中的字符串

localStorage 使用循环的 Vue 组件持久化

使用sencha touch将数组数据对象存储在localStorage中

使用 JavaScript 在 localStorage 中存储多条记录

在react.js中如何使用localStorage?

使用setTimeout()函数从localStorage中删除项目

使用 Splice 从 LocalStorage 中删除项目

如何使用替换器函数对来自UrlFetchApp的响应进行字符串化和解析?

使用递归字符串路径将对象列表组织为嵌套数组

如何使用JavaScript将HTML表单值发送到JSON字符串中的localstorage

如何在对象数组上使用 localStorage

使用嵌套数组从数组中获取最小的字符串

使用JSON对象还是使用localStorage / sessionStorage / IndexedDB / WebSQL / etc?

使用JavaScript将以字符串形式存储的嵌套数组转换回嵌套数组

无法使用其 id 从 localStorage 中删除对象

如何使用localStorage.removeItem从数组中删除项目?

JavaScript:localStorage 中的数组问题(使用 JSON Parse)