Question

我正在尝试创建一个简单的程序，将h1值存储在变量中，然后将其存储在cookie中。但每当我重新加载页面时，h1值总是返回0并且没有被保存。有人可以解释一下我如何将变量保存在cookie中，这样当我重新加载页面时它就会停留在那里。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div class="container">
        <h1 id="hs">1 </h1> <img src="image01.jpg" width="960" height="640" />
        <button onclick="increase()" id="d">Increase value of cookie</button>
    </div>
    <script src="cookies.min.js"></script>
    <script>
        Cookies.set('name', 'leo');
        Cookies.set('nams', 'ddleo');
        var h = document.getElementById("hs");

        function increase() {
            var values = parseInt(document.getElementById('hs').innerHTML, 10);
            values++;
            Cookies.set("name", values);
            document.getElementById('hs').innerHTML = Cookies.get("name", values);
        }
    </script>
</body>

</html>

Answer 1

加载页面时，您需要将<h1>替换为Cookie中的值。

var h=document.getElementById("hs");
var value = Cookies.get('name');
if (value) {
    h.innerHTML = value;
}

Answer 2

当您刷新页面时，DOM不知道该cookie的值。它需要明确设置。

这一行：

document.getElementById('hs').innerHTML=Cookies.get("name",values);

在定义函数increase：

之前，应该在页面加载时运行

var h = document.getElementById("hs");

# initial setting of h1:
var initialValue = Cookies.get("name",values);

if(initialValue) {
  h.innerHTML = initialValue;
}

function increase(){
  # dynamic setting of h1 (via the click handler you set up)
}

如何使用cookies js存储javascript变量

2 个答案: