Question

我有一个按钮可以将我页面中的所有声音静音，而我还有其他可以取消静音的按钮。

$(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);
      });

   });


});

问题是当我刷新页面时，更改不会持续存在。我怎样才能使用LocalStorage？

谢谢！

Answer 1

每次用户点击静音/取消静音按钮时，请使用localStorage将其选择保存在localStorage.setItem("name", "value")变量中。您只能保存字符串值。

现在，在每次加载页面时，您应首先使用localStorage检查该变量在用户localStorage.getItem("name")中是否具有特定值，并相应地配置。

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()

Answer 2

单击MuteAll可以将静音状态存储在本地存储中。并在文档就绪函数中检查其初始值。

$(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
   }
});

Answer 3

1）像这样设置项目

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

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

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

  });

2）获取此项目

 localStorage.getItem("muted")

3）在文档就绪函数内检查本地存储并使用单击（）

单击元素

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

如何在localstorage中保存此按钮状态？

3 个答案: