How to distinguish localStorage from storage of each file on click?

Question

I created a simple jQuery script, which stores value "voted1", "voted2", "voted3"in localStorage. The problem is that when clicked, it saves all the values ​​at the same time, and I need it for a click, since it should be called later (for example, if "value3"there is the beginning of jQuery logic ...)

I can’t figure it out after several weeks of testing.

HTML:

[gallery link="none" size="medium" ids="102,13,27,25,23,15" orderby="rand"]
<div class="exists" style="display: none;">Thank you for voting!</div>

CSS

.gallery-item a {
    background-color: black;
    border: 1px solid orange;
        border-radius: 6px;
        color: orange;
        display: inline-table;
        font-size: 14px;
        font-weight: bold;
    max-width: 100%;
    width: 32%;
}
.exists {
    background-color: black;
    border-radius: 18px;
    box-shadow: 1px 3px 20px -3px grey inset;
    display: block;
    height: 32%;
    left: 24%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    max-width: 100%;
    padding-left: 12%;
    padding-top: 6%;
    position: fixed;
    top: 23%;
    width: 36%;
    z-index: 999999;
    color: olivedrab;
    font-weight: bold;
    cursor: context-menu;
}
.voted {
    background-color: green !important;
}

JQuery

$(document).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
        voteLink.one('click', function() {
           // localStorage.setItem('voted1', 'yes1');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            })
        voteLink.one('click', function() {
           // localStorage.setItem('voted2', 'yes2');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            })
        voteLink.one('click', function() {
            localStorage.setItem('voted3', 'yes3');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            if($('.voted').length === 3){
            voteLink.fadeOut('slow');
            $('.exists').fadeIn(1800);
            }
        if (localStorage.getItem("voted3")) {
        voteLink.remove();
        votedYes.fadeIn(1800);
        }
        });

As I said, on the first click it puts all the values ​​in localStorage, and I need this separation.

Thanks guys.

Answer 1

  $(document).ready(function() {
    var voteLink = $(".gallery-item a");
    var votedYes = $(".exists");
    if (localStorage.getItem("count") === null) {
      localStorage.setItem("count", 1)
    }
    if (!(localStorage.getItem("voted3") === "yes3")) {
      var i = Number(localStorage.getItem("count")),
        fn = function(e) {
          if (i < 3) {
            localStorage.setItem("voted" + i, "yes" + i);
            $(this).text("Thank you! for vote " + i)
              .addClass("voted" + i);
            localStorage.setItem("count", 1 + i);
            i = Number(localStorage.getItem("count"));
          } else {
            localStorage.setItem("voted" + i, "yes" + i);
            $(this).text("Thank you! for vote " + i)
              .addClass("voted" + i)
              .fadeOut("slow");
            if (localStorage.getItem("voted3") === "yes3") {
              voteLink.remove();
              votedYes.fadeIn(1800);
            }
          }
        };
      voteLink.on("click", fn);
    } else {
      // if `localStorage` has property `"voted3"` and value equals `"yes3"`, 
      // do stuff
    }
  })

Answer 2

: , . ...

, ...

• localStorage 3
• n+1, n .

, localStorage:

if (
      localStorage.getItem("voted1")
   && !localStorage.getItem("voted2")
) {
     voteLink.one('click', function() {
         localStorage.setItem('voted2', 'yes2');
         //...
     });
}

... localStorage :

fn_vote2 = function() {
    if (
          localStorage.getItem("voted1")
       && !localStorage.getItem("voted2")
    ) {
        localStorage.setItem('voted2', 'yes2');
        //...
        voteLink.off('click', fn_vote2);
    }
};
voteLink.on('click', fn_vote2);

vote1, vote3 . , , . .

- .

Btw, localStorage , , vote<n>.