代码之家 › 专栏 › 技术社区 › Deadpool

在localstorage中设置属性的这三种方法都有效吗?

local-storage html javascript

Deadpool · 技术社区 · 8 年前

localStorage.name = "Peter Martin";

但是,在下面的讨论中,我发现还有另外两种设置本地存储的方法。

localStorage - use getItem/setItem functions or access object directly?

localStorage.setItem(city, "New York");
localStorage[country] = "USA";

然而,当我在下面的示例中尝试所有3种方法时,第一种方法似乎很好,但与其他2种方法有问题。如果这三种方法都有效,有人能给我解释一下吗?

<html>

<head></head>

<body>

<button onclick="alpha()">Click Me</button>

<script>
function alpha(){
localStorage.name = "Peter Martin"; 
localStorage.setItem(city, "New York");
localStorage[country] = "USA";
}
</script>

</body> 

</html>

由于StackOverflow存在一些沙盒问题,我发布了错误图像,如下所示:

4 回复 | 直到 8 年前

Tsahi Asher 8 年前

localStorage.setItem(city, "New York"); ,您指的是一个标识符, city ,当前范围中未定义。您应该定义一个名为 ,或者只使用字符串 "city" 直接地

localStorage[country] = "USA"; . country

Liam Joshua 8 年前

如果这三种方法都有效,有人能给我解释一下吗?

是的,他们是(ish)。与Javascript中的几乎所有内容一样,localstorage是一个对象。可以通过两种方式访问对象中的属性:

object.property
object['property']

看见 Property accessors in Javascript MDN . 因此,没有理由不能使用上述属性访问器访问localstorage对象的属性。

localStorage.setItem("city", "New York");

是localstorage对象上的一个方法,该方法:

当传递键名时,存储接口的setItem()方法

MDN

所以这是一种有效的方法 “将该密钥添加到存储器中,或更新该密钥的 . 由于传递了不正确的参数,您对此方法有问题 city "city" . As covered in this answer

Wayne Smith 8 年前

你可以把它分解成

localStorage.name = "Peter Martin"; 
localStorage["name"] = "Peter Martin";

第二个版本允许您使用JavaScript变量。但是更难读取,因为需要确定变量中的值。

var tag= "name";
localStorage[tag] = "Peter Martin";

和

2>获取/设置值的方法或函数;等

localStorage.setItem("name", "Peter Martin");

允许VAR,

var obj = "name";
var value = "Peter Martin";
localStorage.setItem(obj, value);

方法有很多。原型商品,包括以下内容。bind(),允许您在调用setItem时说do something。但一般来说,当我在设置属性后想做某事时,我会在下一行做;我保持它简单易读。

我不知道为什么我需要使用这些方法。但是,在现代系统上,速度应该没有可测量的差异。

也许使用这种方法可以同时打开两个选项卡来同步选项卡之间的数据?

循环中存在改变属性值的情况,方法或属性都可以工作,我记不起细节;但不太可能需要本地存储字符串。

现在我回想起来,为什么有时需要一个方法或函数。

使用属性时失败。(始终返回i的最后一个值10)

var elements = document.getElementsByTagName('input');
var n = elements.length;    // assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
    elements[i].onclick = function() {
        console.log("This is element #" + i);
    };
}

var elements = document.getElementsByTagName('input');
var n = elements.length;    // assume we have 10 elements for this example
var makeHandler = function(num) {  // outer function
     return function() {   // inner function
         console.log("This is element #" + num);
     };
};
for (var i = 0; i < n; i++) {
    elements[i].onclick = makeHandler(i+1);
}

因此,如果您正在浏览一个很长的列表并希望取消,那么使用localStorage返回该列表,使用该方法。

即使本地存储可能不需要方法。我们的潜意识大脑识别模式。带有属性值模式的循环会触发警告,焦虑是因为需要多长时间才能找到它,即使没有回忆细节。虽然它可以工作,因为它不存储对变量的引用,但它只存储静态字符串。

为了以最大速度编程,人们需要遵循他们知道有效的模式。方法在调用方法时解析值的值。

-2

najcn 8 年前

<html>

<head></head>

<body>

<button onclick="alpha()">Click Me</button>

<script>
function alpha(){
localStorage.name = "Peter Martin"; 
localStorage.setItem("city", "New York");
localStorage["country"] = "USA";
}
</script>

</body> 

</html>