What is the distinction between using localStorage and storing individual files when clicking?

Question

What is the distinction between using localStorage and storing individual files when clicking?

Recently, I created a basic jQuery script that stores values such as "voted1", "voted2", and "voted3" in localStorage. However, I encountered an issue where all values are stored simultaneously on click, whereas I require them to be stored individually per click for future jQuery operations (for example, initiating jQuery logic if "value3" is present).

Despite weeks of experimentation, I have been unable to resolve this dilemma.

Below is the 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 {
    // CSS styles here
}
.exists {
    // Additional CSS styles here
}
.voted {
    // More CSS styles here
}

And here's the jQuery code snippet:

$(document).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
    voteLink.one('click', function() {
        // jQuery action on click
    })
});

Does anyone have any insights into how I can save these values separately in localStorage on each click?

Thanks a lot!

javascript jquery css html

Answer 1

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 x = Number(localStorage.getItem("count")),
        func = function(e) {
          if (x < 3) {
            localStorage.setItem("voted" + x, "yes" + x);
            $(this).text("Thanks for voting " + x)
              .addClass("voted" + x);
            localStorage.setItem("count", 1 + x);
            x = Number(localStorage.getItem("count"));
          } else {
            localStorage.setItem("voted" + x, "yes" + x);
            $(this).text("Thank you! for vote " + x)
              .addClass("voted" + x)
              .fadeOut("slow");
            if (localStorage.getItem("voted3") === "yes3") {
              voteLink.remove();
              votedYes.fadeIn(1800);
            }
          }
        };
      voteLink.on("click", func);
    } else {
      // perform actions if `localStorage` has the key `"voted3"` with value `"yes3"`
    }
  })

Answer 2

  $(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 x = Number(localStorage.getItem("count")),
        func = function(e) {
          if (x < 3) {
            localStorage.setItem("voted" + x, "yes" + x);
            $(this).text("Thanks for voting " + x)
              .addClass("voted" + x);
            localStorage.setItem("count", 1 + x);
            x = Number(localStorage.getItem("count"));
          } else {
            localStorage.setItem("voted" + x, "yes" + x);
            $(this).text("Thank you! for vote " + x)
              .addClass("voted" + x)
              .fadeOut("slow");
            if (localStorage.getItem("voted3") === "yes3") {
              voteLink.remove();
              votedYes.fadeIn(1800);
            }
          }
        };
      voteLink.on("click", func);
    } else {
      // perform actions if `localStorage` has the key `"voted3"` with value `"yes3"`
    }
  })

Answer 3

Answer №2

Please Note: While attempting to answer your question, it is important to acknowledge that the solution provided may not be accurate due to insufficient details about your specific use case. However...

The code below makes certain assumptions, including:

LocalStorage will store up to 3 votes
In order to cast vote n+1, vote n must have been previously recorded

You can either set handlers based on localStorage content:

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

...or check localStorage within 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);

Applying the same method for vote1 and vote3 should be straightforward. Keep in mind that this approach involves registering a handler for multiple events rather than just one, as it is removed upon successful completion.

One benefit of this technique is the ability to conduct cascade voting without needing to reload the page.

Lastly, considering that localStorage persists across sessions, it is recommended to avoid using generic keys like vote<n>.

Answer 4

Please Note: While attempting to answer your question, it is important to acknowledge that the solution provided may not be accurate due to insufficient details about your specific use case. However...

The code below makes certain assumptions, including:

LocalStorage will store up to 3 votes
In order to cast vote n+1, vote n must have been previously recorded

You can either set handlers based on localStorage content:

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

...or check localStorage within 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);

Applying the same method for vote1 and vote3 should be straightforward. Keep in mind that this approach involves registering a handler for multiple events rather than just one, as it is removed upon successful completion.

One benefit of this technique is the ability to conduct cascade voting without needing to reload the page.

Lastly, considering that localStorage persists across sessions, it is recommended to avoid using generic keys like vote<n>.

What is the distinction between using localStorage and storing individual files when clicking?

Answer №1

Answer №2

Similar questions

Tips for resolving the issue of invalid functions as a child component in React

The HTML page is failing to call the function in the JavaScript application

Using the mpdf addPage function generates new empty pages

Iterate through the JSON response once the AJAX call is successful

Resolving the ENOTFOUND error in Imgur API call: 443

Tips for delaying page rendering until an AJAX call finishes

What are the steps to utilize chrome.tabs.onUpdated.addListener?

Names of VueJs components

An error stating 'THREE.OBJLoader is not a constructor' has occurred, along with an 'Unexpected token {' message in OBJLoader and OrbitControls

Changing the height of a Bootstrap 3 row without using less variables

Enhancing Your Website - Customizing Image Sizes for Optimal Display

JavaScript - Toggle Checkbox State Based on Array Values

Automatically assigning IDs to all elements on an Angular webpage

Notifying users with a beeping sound in PHP through AJAX queueing

Having trouble centering an element with Bootstrap's offset feature in CSS

Steps to trigger an alert when the entered quantity exceeds the current stock levels

Trouble with HTML5 Geolocation Functionality

How to perfectly align a full-width div with a div of specific width

How to dynamically change the class of an element that contains other elements using JavaScript and JQuery

What are the steps for positioning the footer at the bottom of the page?