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本地存储（Web存储）示例

演示：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);
    }
}

Web Storage documentation on w3.org

Cookie示例

此示例使用MDN here中的最小框架，因此请务必包含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，则使用问号部分，否则使用冒号部分。

有关更多示例，请参阅this question。

Answer 2

Cookie不适用于此，因为每次请求都会将Cookie发送到服务器。

相反，使用存储。保留当前代码，并将visible替换为localStorage.visible。这将允许变量在页面加载中保持不变。

此外，您需要独立于if( localStorage.visible) document.getElementById('yourID').style.display = 'block';函数添加menu，以便在加载页面时应用初始状态。

在Javascript中将变量保存为cookie？

2 个答案:

HTML5本地存储（Web存储）示例

Cookie示例