Question

我使用一些JavaScript为网站制作了一个按钮点击计数器。该计数器工作得很好，但现在我一直在努力保存计数。你知道，如果我点击按钮3次，文字说3次。但我想保存该值，因此如果用户刷新页面，它应该再次显示3次。

我知道使用 localStorage ，我按照一个简单的教程将其应用到我的代码中，但它似乎没有用。当我在Microsoft Edge中运行该页面并查看“调试”页面（F12）时，控制台会抛出一条错误消息：Unable to get property 'getItem' of undefined or null reference。我搜索了其他帖子，但没有一个可以解决我的问题。在localStorage中检索值时似乎卡住了。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Increment count when button is clicked</title>
</head>

<body>
<input type="button" value="Registrar" id="countButton" />
<input id="ocityField" type="text" value="" placeholder="Ciudad de Origen"/>
<input id="cityField" type="text" value="" placeholder="Ciudad de participación"/>
<input id="name" type="text" value="" placeholder="Nombre"/>
<p>Personas Registradas: <span id="displayCount">0</span></p>

<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var textbox = document.getElementById("ocityField");
var textboxa = document.getElementById("cityField");
var textboxb = document.getElementById("name");
if(window.localStorage.getItem('count')){
    var savedcount = window.localStorage.getItem('count');
    count = window.localStorage.getItem('count');
}else{
    count = 0;
}
display.innerHTML = count;
button.onclick = function(){
    var mystring = textbox.value;
    var mystring2 = textboxa.value;
    var mystring3 = textboxb.value;
    if(!mystring.match(/\S/) || !mystring2.match(/\S/) || !mystring3.match(/\S/)) {
        alert ('Empty value is not allowed');
        return false;
    } else {    
        count++;
        window.localStorage.setItem('count', count);
        display.innerHTML = count;      
        textbox.value = "";
        textboxa.value = "";
        textboxb.value = "";
        return true;
        }
}
</script>
</body>
</html>

我尝试使用window.localStorage而只是localStorage，但没有人工作。

Answer 1

可能是你使用IE浏览器不支持localStorage，代码可以在Chrome49中运行。

Answer 2

Can I Use localStorage，您可以在这里查看哪些浏览器支持版本号为localStorage。

如果浏览器不支持localStorage，则在客户端存储数据的备用方式是cookie。

您还可以使用Modernizer之类的第三方插件来检查浏览器是否支持。

Modernizr.localstorage如果评估为true，则浏览器支持localStorage。

以下示例演示了localStorage和cookie，具体取决于浏览器兼容性。使用Modernizer和jQuery

codepen

在javascript

2 个答案: