javascript - 使用 localStorage 和 sessionStorage 作为元素树

Question

在应用程序重构期间，我最近发现 localStorage 和 sessionStorage 是键值存储，所以问题:是否有任何 JavaScript 实现将 localStorage、sessionStorage 用作 JSON，并保持通过浏览器调试工具轻松编辑它们的能力？

例子: 我们为关键应用程序创建一些值，它有设置、连接等子键，它们有属性子键。

所以，像这样与他们互动的简单方法:

if (localStorage.application.connection.URI.slice(0, 5) === "https") { ... }

并且，如果我们需要销毁属性的分支并重新初始化它们:

localStorage.application.connection = undefined;

有什么办法吗？我知道，我可以用

if (localStorage.getItem("application.connection.URI").slice(0, 5) === "https") { ... }

并且(感谢这个答案How to remove localStorage data starting with a certain string?)

for (key in localStorage) {
    if (key.substring(0,22) == 'application.connection') {
        localStorage.removeItem(key);
    }
}

但阅读和使用起来有点困难。

有什么建议吗？对不起我的英语。

Answer 1

有点晚了，但你开始吧:我实现了 DotStorage作为大约一年前的 hacky 解决方案。

它既没有维护也没有经过全面测试，但它完成了工作。
...我刚刚检查了 repo 协议(protocol):请注意您需要 pako为了这个工作....

不要将它用于大事，因为这是通过在代理中自动包装对象及其属性来实现的 - 通过捕获所有内容来实现深度变化检测。

用法:与任何其他 Javascript 对象一样，它只是持久的:

dotStorage.Hello = "World";
// reload page
console.assert(dotStorage.Hello == "World");

你可以看看我的基于 JSFiddle 的测试文件 here

示例:

var myObj = {"New": "object"};

// save the object
dotStorage.refTest = myObj;

// get proxified instance
myObj = dotStorage.refTest;

// change nested properties
myObj.New = {"nested": {"otherObject": [0, 1]}};
console.log(JSON.stringify(dotStorage.refTest.New));

// reload the page ------------------------------------------

// change more nested properties
myObj.New.nested = 2;

// everything is still there
console.log(JSON.stringify(dotStorage.refTest.New));