Changing Javascript to Jquery

Question

I used to have two buttons which flicked between thumbs up and down remembered the state and loaded it on refresh. It looked like this.

 var thumbStatus;
 //If thumbs up is tapped change styles of each button and save to LocalStorage
 function thumbsup() {
 document.getElementById("thumbsup").classList.remove("btn-default")
 document.getElementById("thumbsup").classList.add("btn-success")
 document.getElementById("thumbsdown").classList.remove("btn-danger")
 document.getElementById("thumbsdown").classList.add("btn-default")
 localStorage.setItem('thumbstatus3840210', 'up');
 }
 //If thumbs down is tapped change styles of each button and save to LocalStorage
 function thumbsdown() {
 document.getElementById("thumbsdown").classList.remove("btn-default")
 document.getElementById("thumbsdown").classList.add("btn-danger")
 document.getElementById("thumbsup").classList.remove("btn-success")
 document.getElementById("thumbsup").classList.add("btn-default")
 localStorage.setItem('thumbstatus3840210', 'down');
 }
 //If thumbs up was the last button to be tapped, show this on page load
 function Loadthumbs() {
 if (localStorage.getItem('thumbstatus3840210') === 'up') {
 thumbsup();
 }
 //If thumbs down was the last button to be tapped, show this on page load
 if (localStorage.getItem('thumbstatus3840210') === 'down') {
 thumbsdown();
 }
 }

How can I do this using Jquery. So far I have this. It only styles the buttons At the moment with no saving of data?

 $(function() {
 $("#thumbsup").click(function() {
 $(this).addClass("thumbsup")
 $("#thumbsdown").removeClass("thumbsdown")
 });
 $("#thumbsdown").click(function() {
 $(this).addClass("thumbsdown")
 $("#thumbsup").removeClass("thumbsup")
 });
 }); 

• putvande: Add localStorage.setItem(...?
• Kishore: just add the localstorage code to your jQuery code
• Bram Vanroy: Don't forget, jQuery is only a library. It can 'read' regular JavaScript as well.
• Scott Mermelstein: I second @BramVanroy's sentiment. "If it ain't broke, don't fix it." If you find the jQuery syntax cleaner for adding and removing the class, keep it, but otherwise, keep your logic flow exactly as it was. jQuery is just supposed to make it more convenient to use JavaScript.
• Jonathan Marzullo: sometime using native javascript is faster than using jQuery.. like document.getElementById("element") is faster than using $("#element") in jQuery

Answer 1

I am guessing this is what you want (your own jQuery doesn't make much sense). I wrote the function in their own place so you could edit them easily or use them in other calls, but you sure can place them directly in the click function. I also think you want to run the loadthumbs function on document ready, so I did that as well.

Also, I used an else-if function. It seems more logical to me than two if functions. Simply an else function is possible as well, but I don't know which values can be given to the item. So just to be safe an else if seems fine.

$(document).ready(function () {
 function thumbsup() {
 $("#thumbsup").removeClass("btn-default").addClass("btn-success");
 $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
 localStorage.setItem('thumbstatus3840210', 'up');
 }
 function thumbsdown() {
 $("#thumbsdown").removeClass("btn-default").addClass("btn-success");
 $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
 localStorage.setItem('thumbstatus3840210', 'down');
 }
 function Loadthumbs() {
 if (localStorage.getItem('thumbstatus3840210') === 'up') {
 thumbsup();
 }
 else if (localStorage.getItem('thumbstatus3840210') === 'down') {
 thumbsdown();
 }
 }
 Loadthumbs();
 $("#thumbsup").click(function() {
 thumbsup();
 });
 $("#thumbsdown").click(function() {
 thumbsdown();
 });
});

OR:

$(document).ready(function () {
 function Loadthumbs() {
 if (localStorage.getItem('thumbstatus3840210') === 'up') {
 thumbsup();
 }
 else if (localStorage.getItem('thumbstatus3840210') === 'down') {
 thumbsdown();
 }
 }
 Loadthumbs();
 $("#thumbsup").click(function () {
 $(this).removeClass("btn-default").addClass("btn-success");
 $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
 localStorage.setItem('thumbstatus3840210', 'up');
 });
 $("#thumbsdown").click(function () {
 $(this).removeClass("btn-default").addClass("btn-success");
 $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
 localStorage.setItem('thumbstatus3840210', 'down');
 });
});