访问localStorage的最佳方法

Best approach to access localStorage

本文关键字：方法 最佳 localStorage 访问      更新时间：2023-09-26

在整个网络中，我看到了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可以封装函数的逻辑，也可以扩展。

我希望能得到更多的见解，有人能给点建议吗?

EDIT:这个问题的原因来自localStorage不仅仅是一个数组，所以我正在寻找明确针对localStorage和它的实现的意见。

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

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

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

规格说明:

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

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

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

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

我个人会使用这些方法，但是将我应用程序中的功能抽象为一个简单的函数，如果需要的话，我可以稍后交换。例句:

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

如果因为某种原因我发现了这个问题，或者需要支持旧的浏览器(比如，退回到常规的cookie)，我可以在一个地方改变我的应用程序。我知道这不是你的问题，但这就是。

我是这样用的

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);
相关文章：