javascript - How to differentiate localStorage from storing each file on click?

Question

I've made a simple jQuery script which stores values "voted1", "voted2", "voted3" in localStorage. The problem is that on click it stores all values at the same time, and I need it per click as it should be later called (e.g. if "value3" exists begin jQuery logic...)

I can't figure this out, after 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 first click it places all values in localStorage and I need this separated.

Thanks guys.

Answer 1

Caveat: This answer may be completely off, since your question comes without all the details of your use case. However ...

The following code assumes that ...

• up to 3 votes shall be recorded in localStorage
• in order to cast the vote n+1, vote n must have been recorded before.

Either register the handlers contingent on the content in localStorage:

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

... or test the localStorage contents inside your event handler:

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

The generalization for vote1, vote3 should come easy. Note that the latter solution implies that you register the handler not just for a single event. Instead you deregister it upon success.

The advantage of the method is the option for cascaded voting without reloading the page.

Btw, since localStorage persists over sessions, it is advisable not to use generic keys like vote<n>.