Question

好的，所以我得到了一个简单的脚本，当按下按钮时会增加一个数字：

<script>
var count = 0;
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");

    button.onclick = function(){
        count++;
        display.innerHTML = count;
        } </script>

这是按钮：<input type="button" value="Count" id="countButton" />

这是数字：<span id="displayCount">0</span>

我的问题是，当我刷新页面时，该数字从0开始重新开始。我想要的，例如，如果我按两次按钮然后重新启动浏览器，页面将显示数字＆＃34; 2＆＃34;，而不是0。

一些帮助？

Answer 1

本地存储似乎是你想要的东西。

var count = 0;
if(localStorage.btncount){count=localStorage.btncount;} //check if you have already stored it; set count to it if yes
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");
    display.innerHTML = count;
    button.onclick = function(){
        count++;
        localStorage.btncount=count; // store the count
        display.innerHTML = count;
    }

Answer 2

您需要使用localStorage API。

http://www.w3schools.com/html/html5_webstorage.asp

未经测试。

<script>
    var count = localStorage.getItem("count") || 0;
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");

    button.onclick = function() {
        count++;
        display.innerHTML = count;

        localStorage.setItem("count", count);
    }
</script>

Answer 3

这是因为每次刷新页面时都会重新加载脚本。

解决此问题的最现代/最简单的解决方案是使用随HTML5引入的webstorage（浏览器中的本地/会话存储）。

你可以这样做：

localStorage.setItem('count', '0');
var incrementedCount = localStorage.getItem('count') + 1;
localStorage.setItem('count', incrementedCount);

localStorage（和sessionStorage）是窗口对象上的一个属性，可用于在浏览器会话之间保存数据，sessionStorage只会将数据保留在一个会话中且不会更少对你的用例很有用。

这是一个非常简单的API，目前它只能存储字符串，因此要存储您需要使用的对象JSON.stringify和JSON.parse

Answer 4

本地存储的替代方案是使用Cookie。使用window.onbeforeunload在浏览器关闭之前将值保存在cookie中，然后在页面加载时访问它。 http://www.w3schools.com/js/js_cookies.asp

关闭浏览器后保存变量

4 个答案: