将变量另存为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功能，以便在加载页面时应用初始状态。