4

在整个网络中，我看到了 3 种保存和检索数据的方法localStorage：

//As an array
localStorage["key"] = "value";
var value = localStorage[key];

//As an object, using properties
localStorage.key = value;
var value = localStorage.key;

//As an object, using getter and setter functions
localStorage.setItem("key", "value");
var value = localStorage.getItem("key");

据我所知，前两个是等价的，因为 JavaScript 中的数组被视为对象。

第三种方法似乎是最好的方法，因为使用 getter 和 setter 可以封装函数的逻辑以及扩展。

我希望对此有更多的了解，有人可以建议吗？

编辑：这个问题的原因来自这样一个事实，即 localStorage不仅仅是一个数组，所以我正在寻找明确针对 localStorage 的意见及其实现。

4

3 回答 3

3

你的理解对我来说似乎完全正确。可能让您感到困惑的是 javascript 的奇怪性质。在 javascript 中，一切都是对象，每个对象本质上都可以像哈希图一样对待，因此您的前两个示例是等价的。最后两个示例实际上也是等效的，因为它们只是本地存储对象的函数成员。由于所有示例都具有相同的效果，我想说最重要的是在您的代码中保持一致以使其更具可读性。

请记住，数组也是一个对象，可以这样对待

于 2013-05-29T23:34:18.813 回答
1

括号访问和点访问对象属性之间的区别只是语言的一种方便。不过，直接属性访问和使用 getter/setter 方法之间的区别很有趣。

规范说：

“存储对象上支持的属性名称是当前存在于与该对象关联的列表中的每个键/值对的键。”

这对我来说，直接访问是完全合法的。即所有实现规范的用户代理都应该支持它。

至于哪个更好。我不确定规范的目的是这样说的。它不能说明特定的用户代理实现如何由于其内部工作原理而偏向于一种方法或另一种方法。规范实际上只是定义了接口。

例如 - 如果特定用户代理中的直接属性访问只是在内部调用 getter/setting 方法，那么使用这些方法可能会带来性能优势。

就我个人而言，我会使用这些方法，但将我的应用程序中的功能抽象为一个简单的函数，如果以后需要，我可以将其换掉。例如：

function getLocal( key ){
    return localStorage.getItem(key);
}

如果由于某种原因我发现了这个问题，或者需要支持旧版浏览器（例如，回退到常规 cookie），我可以在一个地方更改我的应用程序。我知道那不是你的问题，但它确实存在。

于 2013-05-30T00:19:51.607 回答
0

这就是我使用它的方式。

function setLocalObj(id, obj){
    if(id && obj)
        localStorage[id] = JSON.stringify(obj);
}

function getLocalObj(id){
    if(localStorage[id])
        return JSON.parse(localStorage[id]);
}

function removeLocalObj(id){
    if(localStorage[id])
        localStorage.removeItem(id);
}


var myObj = {
    'val':10,
    'str': 'hi there'   
}
setLocalObj('myObj', myObj);
于 2013-05-29T23:40:33.300 回答