Get/set number value to localstorage

Question

I'm trying to use local storage to store a number so that it stays even if i refresh or revisit the page, but whenever i refresh the return value is 0.

I know that it's probably a really easy fix that I can't figure out but i would very much appreciate an answer to this beginners (probably) easy question.

In case you were wondering this is for a star rating system.

HTML:

<p id="r1"></p>

jQuery:

$(document).ready(function(){
    var x1;
    x1 = +localStorage.getItem("x1");
    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
    });

    localStorage.setItem("x1", x1);
});

Answer 1

First problem is that you're not providing the name of the local storage item when you retrieve it with getItem , that should be localStorage.getItem("x1") .

The second problem is that you're calling setItem() when the page is loaded, not when the user clicks on the rating, so it's not using the rating that the user selects.

$(document).ready(function(){
    var x1;
    x1 = +localStorage.getItem("x1");
    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        var x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
        localStorage.setItem("x1", x1);
    });
});

Answer 2

Currently you are requesting the local storage value for the key undefined because x1 has no value. If you change x1 to a string you will then get the value for the key "x1" if it exists.

So your code would become:

$(document).ready(function(){

    var x1 = localStorage.getItem("x1");

    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
        localStorage.setItem("x1", x1);
    });


});

your localStorage.setItem("x1", x1); is correct, but in the wrong spot, it needs to be inside the click event block.

Answer 3

This is because x1 is undefined. So what you are essentially doing is localStorage.getItem(undefined). This returns null, and since you have a plus it's converting null to 0.

 +null == 0; // true

Answer 4

It appears you may be a bit confused as to how the localStorage methods works. Basically you need two things: a key and a value you wish to assign to it. I'll give you a brief example of how it works.

 const key = 'taco'; let value = 'sauce'; localStorage // {se:fkey: "c6d8756477bc8eb22494f28a5bbc3afc,1464967104", length: 1} // Now let's say I want to save this to local storage. This is how. localStorage.setItem(key, value); localStorage // {se:fkey: "c6d8756477bc8eb22494f28a5bbc3afc,1464967104", taco: "sauce", length: 2} . As you can see it is now in localStorage. // Now let's say we want to retrieve what we set from localStorage. localStorage.getItem(key); // 'sauce' 

Hope that helps.