Question

我有一个页面利用本地存储来保存点击按钮的次数：

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "" + localStorage.clickcount + ".";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}

我现在想添加3个按钮，并希望分别存储每个按钮的值。要显示它我知道我会引用相应的ID，但我不知道如何存储这些值。我想我将有另外3个函数来执行此操作并需要为每个值创建一个变量？我在正确的道路上吗？

Answer 1

简而言之，您可以执行以下操作以在localStorage中存储项目：

localStorage.firstButtonCount += 1;

localStorage.secondButtonCount +=1;

问题的关键是localStorage表现得像一个javascript对象。因此，这意味着您应该记住，如果使用.点符号来执行此操作，则无法对来自变量并在运行时确定的键执行此操作。对于这种情况，请使用方括号[]。

var my = 'firstButtonCount';
var second = 'secondButtonCount';

if(something > 10){
localStorage[my] += 1; // Determined dynamically
} else{
localStorage[second] += 1; 
}

Answer 2

您可以继续使用点表示法向localStorage对象添加新项目。 localStorage.keyName = value完全可以接受。要查看它的外观，请打开浏览器开发工具并在控制台中输入localStorage。你会发现它基本上只是一个对象。

使用HTML5本地存储保存多个值

2 个答案: