使用HTML5本地存儲保存多個值

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 。 您將看到它基本上只是一個對象。