CODEWITHSUNDEEP
javascriptjqueryhtml
Carlos Zurera Andrés
Carlos Zurera Andrés

Reputation: 19

How to save this button status in a localstorage?

I have a button that mute all sounds in my page and I have other that unmute it.

$(document).ready(function(){

   /*** Mute all ***/
   $('#mute_all').on('click',function(){

      /*** Mute all video and audio on page ***/
      $('body video, body audio').each(function(){
         /*** Do it here globally ***/
         $(this).prop('muted', true);
      });

   });

   /*** UnMute all ***/
   $('#unmute_all').on('click',function(){

      /*** Un Mute all video and audio on page ***/
      $('body video, body audio').each(function(){
         /*** Do it here globally ***/
         $(this).prop('muted', false);
      });

   });


});

The problem is when I refresh the page, changes arent persist. How can I do it with a LocalStorage?

Thanks!!

Upvotes: 0

Views: 1062

Answers (3)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

Every time user clicks mute/unmute button, save their choice in a localStorage variable using localStorage.setItem("name", "value"). You can save only string values.

Now on every page load, you should first check if that variable has specific value in user's localStorage using localStorage.getItem("name") and configure things accordingly.

You can read more about localStorage here.

$(document).ready(function(){
   // first check localStorage if any previous choice is stored
   var muted = localStorage.getItem("muted");
   if( muted === "true" ){
      muteAll();
   }

   /*** Mute all ***/
   $('#mute_all').on('click',function(){    
      muteAll();    
   });

   /*** UnMute all ***/
   $('#unmute_all').on('click',function(){

      /*** Un Mute all video and audio on page ***/
      $('body video, body audio').each(function(){
         /*** Do it here globally ***/
         $(this).prop('muted', false);
      });
      // save user's current choice in localStorage
      localStorage.setItem("muted", "false");

   });


});

function muteAll(){
     /*** Mute all video and audio on page ***/
      $('body video, body audio').each(function(){
         /*** Do it here globally ***/
         $(this).prop('muted', true);
      });
      // save user's current choice in localStorage
      localStorage.setItem("muted", "true");
}//muteAll()

Upvotes: 3

JYoThI
JYoThI

Reputation: 12085

1) set item like this 

 $('#mute_all').on('click',function(){

   $('body video, body audio').each(function(){
     /*** Do it here globally ***/
     $(this).prop('muted', true);
  });

    localStorage.setItem("muted", "true")

  });

2) Get item like this 

 localStorage.getItem("muted")

3) inside the document ready function check the local storage and click the element using click()

     $(document).ready(function(){  
         var muted = localStorage.getItem("muted");
         if( muted === "true" ){
             $('#mute_all').click();
            }
       });

Upvotes: 0

Deepak
Deepak

Reputation: 870

You can store the muted status in local storage on clicking the MuteAll. And check for its initial value in the document ready function.

$(document).ready(function(){  
   function muteAll(){
    $('body video, body audio').each(function(){
         $(this).prop('muted', true);
      });
     window.localStorage.setItem('muted','true');
   }
   function unmuteAll(){
     $('body video, body audio').each(function(){

         $(this).prop('muted', false);
      });
     window.localStorage.setItem('muted','false');
   }

    $('#mute_all').on('click',mute_all);
   $('#unmute_all').on('click',unmute_all);
   var status=window.localStorage.getItem('muted')
   if(status && status=='true'){
    mute_all();
   }else{
    unmute_all(); //if required
   }
});

Upvotes: 1

Related Questions