0

As the title may give away I am trying to increment a score value across page refreshes. I'm not entirely sure if what I have is set up right so there's a bit commented out. Not looking for straight answers, just some pointers and advice to get to where I need to be.

var score = 0;
//localStorage.setItem("score", score);
var rounds;
var ans;
var img;
img = document.getElementsByClassName("image")[0].id;
$(".answer").click(function() {
ans = $(this).attr('id');
if (ans === img) {
   //score++;
   //score = localStorage.getItem("score", score);
   score++;
   //localStorage.setItem("score", score);
   //rounds++;
   alert('right answer');
   location.reload();
} else {
   //score = 0;
   //rounds++;
   alert('wrong answer');
  //location.reload();
}
});
//var res = localStorage.getItem("score", score)
//console.log(res);

Only been playing around with query for a couple of days so still feeling about blindly. Any help would be great. Rest of the script can be found here jfiddle

JimmyPop13
  • 307
  • 1
  • 13
  • 1
    To persist this across page refreshes you could either store the code on a backend and pull it at a later time or store it in a browser (i.e. cookie). I recommend the latter. – henry Apr 25 '17 at 19:50
  • 1
    if you want to store a value across page load without using a database/writing file, you will need to learn about creating/reading cookies – Joe Lissner Apr 25 '17 at 19:51
  • 2
    As @harrison said you need to store it somewhere because variables in JS don't survive a page refresh. You have some code with your `localStorage` code. What was wrong with that? – adam-beck Apr 25 '17 at 19:51
  • 1
    You're setting `score` to `0` on the first line, and then you store it (commented line). Instead, you should first check if that value is already stored, and if it is, apply it to the `score` variable. Like this: `var score = parseInt(localStorage.getItem("score"), 10) || 0;`. The rest of your code looks good to me – blex Apr 25 '17 at 19:52
  • 1
    As said by @harrison, you could store it server-side. If you store a variable in Jquery it will be removed as soon as the user closes the window or navigates away, and if you use cookies it will only increment for the same user visiting the page and will be removed if he removes cookies – pablito.aven Apr 25 '17 at 19:52
  • See also [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/30144363?s=1|0.0000#30144363) – guest271314 Apr 25 '17 at 19:57
  • This question may be a duplicate but the linked one is not a good reference. – adam-beck Apr 25 '17 at 19:58
  • @adam-beck "the linked one is not a good reference." How so? – guest271314 Apr 25 '17 at 20:09
  • I'm having a hard time even understanding the question in the linked one. And it doesn't really discuss that variables don't survive page refreshes. The accepted answer is just code with no explanation. – adam-beck Apr 25 '17 at 20:12

1 Answers1

2

I think you are on the right track by using localStorage. It's very easy to grasp and you already started implementing some of the code. The first thing you want to do though is initialize the score variable by calling localStorage.getItem('score');. There is no second parameter for getItem.

Then you need to decide should the score be saved before or after incrementing? Depending on that answer you would call localStorage.setItem('score', score);

https://developer.mozilla.org/en-US/docs/Web/API/Storage

adam-beck
  • 5,659
  • 5
  • 20
  • 34