在javascript中的localStorage中保存按钮点击计数答案

【问题标题】：Save Button-Click Count in localStorage in javascript在javascript中的localStorage中保存按钮点击计数
【发布时间】：2016-10-19 01:19:54
【问题描述】：

我使用一些 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，但没有人使用。

【问题讨论】：

你在其他浏览器上试过吗？
是的，我尝试过 Google Chrome、Safari 和 IE9。得到同样的错误。
你在本地浏览吗？
html, javascript 在问题返回预期结果plnkr.co/edit/d7g5423KZVhUFuzuNnQN?p=preview
@SoonKhai 是的，我正在本地浏览。

标签： javascript local-storage

【解决方案1】：

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

【讨论】：

Microsoft Edge Ver25.10 怎么样？
根据caniuse，localStorage 从一开始就对Edge 可用（实际上IE8 支持）。但它可能不适用于file:///，使用网络服务器可能会成功
是的，我看到了所有支持 localStorage 的浏览器列表，我安装的所有浏览器似乎都支持它，但它根本不起作用。但我会尝试将它上传到网络服务器，看看它是否在那里工作。
@ChrisHD22，我没有使用 Microsoft Edge，你的想法是对的，Microsoft Edge 没有在本地文件中使用 localStorage。

【解决方案2】：

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

如果浏览器不支持 localStorage，另一种在客户端存储数据的方法是 cookie。

您也可以使用Modernizer等第三方插件来检查浏览器是否支持。

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

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

codepen

【讨论】：