Save Button-Click Count in localStorage in javascript

Question

I made a button click counter for a website using some JavaScript. The counter works well, but now I'm stuck in making the saving of the count. You know, if I click the button 3 times, the text says 3 Times. But I want to save that value so if the user refreshes the page, it should display 3 Times again.

I knew of using localStorage, I followed a simple tutorial and applied it to my code, but it does not seem to be working. When I run the page in Microsoft Edge and see the Debug page (F12), the console throws an error that says: Unable to get property 'getItem' of undefined or null reference. I searched in other posts but no one of these could solve my problem. It seems to be stuck when retrieving the value in localStorage.

This is my code:

<!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>

I tried using window.localStorage and just localStorage but no one did work.

Yes, I tried Google Chrome, Safari and IE9. Getting same error. — Evreux Pendragon, Oct 19 '16 at 01:27
`html`, `javascript` at Question returns expected result http://plnkr.co/edit/d7g5423KZVhUFuzuNnQN?p=preview — guest271314, Oct 19 '16 at 01:30
Try to host it in IIS or any Web Server, i have tested your code is working fine. — Soon Khai, Oct 19 '16 at 01:31
@guest271314 saw your link and it is working fine. But if I use the html that I created, the console throws the error mentioned above. — Evreux Pendragon, Oct 19 '16 at 01:34
@ChrisHD22 To test locally at chrome, chromium you can launch with `--allow-file-access-from-files` flag set, see [Jquery load() only working in firefox?](http://stackoverflow.com/questions/32996001/jquery-load-only-working-in-firefox/) , [How to print all the txt files inside a folder using java script](http://stackoverflow.com/questions/37634049/how-to-print-all-the-txt-files-inside-a-folder-using-java-script/) — guest271314, Oct 19 '16 at 01:37
Yes Chris, if you double click to browse the html file, localStorage doesn't work on IE, you have to run it from the web server. — Soon Khai, Oct 19 '16 at 01:38
@guest271314 I tried to test it in chrome with the allow-file-access-from-files and it seems to work fine. For testing locally I think this will work well for now. But I will try it in the web server anyway. — Evreux Pendragon, Oct 19 '16 at 01:45

score 0 · Answer 1 · answered Oct 19 '16 at 01:36

0

May be that you use the IE browser does not support localStorage，The code can run in Chrome49.

answered Oct 19 '16 at 01:36

遁地龙卷风

40
4

What about Microsoft Edge Ver25.10 ? – Evreux Pendragon Oct 19 '16 at 01:36
According to [caniuse](http://caniuse.com/#feat=namevalue-storage) localStorage is available to Edge from beginning (In fact, IE8 supports it). But it might not be available for `file:///`, use of web server may do the trick – tanmay Oct 19 '16 at 01:39
Yes I saw a list of all browsers supporting localStorage, all my installed browsers seem to support it, but it simply doesn't work. But I will try uploading it to a web server to see if it works there. – Evreux Pendragon Oct 19 '16 at 01:41
@ChrisHD22，I‘m not use Microsoft Edge,you idea is right， Microsoft Edge isn't use localStorage in the local file. – 遁地龙卷风 Oct 20 '16 at 01:09

score 0 · Answer 2 · edited May 23 '17 at 10:32

Can I Use localStorage, here you can check what browser supports localStorage with version numbers.

Alternate way to store data on client side is cookies if localStorage doesn't supported by browser.

You can also use third party plugins like Modernizer, to check whether browser supports or not.

Modernizr.localstorage if it evaluate to true the browser supports localStorage.

Following example demonstrates localStorage and cookies depending on browser compatibility. uses Modernizer and jQuery

codepen

Save Button-Click Count in localStorage in javascript

2 Answers2