將變量另存為JavaScript中的cookie？

Question

我有一個顯示或隱藏菜單的函數，但是如果刷新，該變量將重置為0 。 我想要的是保持頁面刷新之間當前的變量值，我猜您是使用cookie嗎？ 但是我不知道如何。

visible = 0; // Want this variable to keep it's value

function menu(id)
{
    if(visible == 0) {
        document.getElementById(id).style.display = "block";
        visible = 1;
    }
    else {
    document.getElementById(id).style.display = "none";
    visible = 0;
    }
}

Answer 1

除非使用框架，否則在JavaScript中管理cookie很難。 使用Cookie的好處是您不必擔心與舊瀏覽器的兼容性。 但是，如果您不關心舊的瀏覽器，則可以使用HTML5本地存儲（又名Web存儲），該存儲使您可以保留基本的鍵/值對字符串。

HTML5本地存儲（網絡存儲）示例

演示： http ： //jsfiddle.net/9zsH4/

在演示中，嘗試切換菜單，然后刷新頁面以查看其狀態。

function getVisible(){
    var value = localStorage.getItem('visible');
    return value == '1';
}

function setVisible(visible){
    localStorage.setItem('visible', (visible ? '1' : '0'));
}

function menu(id)
{
    if(!getVisible()) {
        document.getElementById(id).style.display = "block";
        setVisible(true);
    } else {
        document.getElementById(id).style.display = "none";
        setVisible(false);
    }
}

• w3.org上的Web存儲文檔

---

Cookie示例

此示例使用了MDN的最小框架，因此請確保包含docCookies框架。

function getVisible(){
    var value = docCookies.getItem('visible');
    return value == '1';
}

function setVisible(visible){
    docCookies.setItem('visible', (visible ? '1' : '0'), new Date(2015, 5, 12));
}

function menu(id)
{
    if(!getVisible()) {
        document.getElementById(id).style.display = "block";
        setVisible(true);
    } else {
        document.getElementById(id).style.display = "none";
        setVisible(false);
    }
}

編輯：解釋這一行：

localStorage.setItem('visible', (visible ? '1' : '0'));

在這里，我正在使用三元運算符。 if / else只是一個簡寫，所以和這樣做一樣：

if(visible){
    localStorage.setItem('visible', '1');
} else {
    localStorage.setItem('visible', '0');
}

另一個示例：獲取布爾值的人類是/否表示。

var something = true;
var humanText = something ? 'Yes' : 'No';
console.log(humanText); // Yes

var something = false;
var humanText = something ? 'Yes' : 'No';
console.log(humanText); // No

如您所見，將評估第一部分，如果結果等於true ，則使用問號部分，否則使用冒號部分。

有關更多示例，請參見此問題 。

Answer 2

Cookies不適合此操作，因為它們將隨每個請求發送到服務器。

而是使用存儲。 保留當前代碼，並使用localStorage.visible替換visible 。 這將使變量在頁面加載中保持不變。

另外，您將需要添加if( localStorage.visible) document.getElementById('yourID').style.display = 'block'; 獨立於menu功能，以便在加載頁面時應用初始狀態。