使用 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") { ... }

并且（感谢这个答案）

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

但阅读和使用略有困难。

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

Answer 1

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

它既没有维护也没有经过全面测试，但它完成了工作。
...我刚刚检查了回购协议：请注意您需要 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));

使用 localStorage 和 sessionStorage 作为元素树

Using localStorage and sessionStorage as tree of elements

html

javascript

session-storage

local-storage