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

Saving multiple values using HTML5 local Storage

本文关键字：保存 存储 HTML5 使用      更新时间：2023-09-26

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

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 个函数来执行此操作，并且需要为每个值创建一个变量？我走在正确的道路上吗？

简而言之，您可以执行以下操作来存储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; 
}

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

相关文章：