Question

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

//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 is more than just an array，因此我正在寻找明确针对localStorage及其实施的意见。

Answer 1

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

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

Answer 2

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

规范说：

＆＃34; Storage对象上支持的属性名称是当前与对象关联的列表中存在的每个键/值对的键。＆＃34;

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

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

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

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

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

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

Answer 3

这就是我使用它的方式。

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);

访问localStorage的最佳方法

3 个答案: