跳转页面存变化的值

项目首页有一个背景音乐的播放,实现,用户点击暂停,调到其它页面,再回来,音乐还是暂停状态~

1.本地存储。此处用的sessionStorage(关闭这个页面,存储的值就会清空)。因为localStorage是需要清楚缓存值的,这里每次用户重新进入此页面,存储的值应该为空,让音乐自动播放~所以不适合~

2.在body中插入onbeforeunload。这个在android起作用,就是跳转页面要执行的函数~这个在ios是不起作用的~跳转页面存值,1为播放,2为暂停,null为首次进入页面,默认播放~

<body  onbeforeunload="return Checkaudio();">
//初始化
       var Storage=window.sessionStorage;//关闭页面清除存的值
       var audioplay=Storage.getItem('audioplay');

       /*alert(audioplay);*/
       //判断ios还是android终端
       var u = navigator.userAgent;
       var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端
       var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
       if(isAndroid){//判断是安卓终端后执行什么操作
           if(audioplay==2){
            $('.audiojs').removeClass('playing');
            }else{
                 $('audio').attr('autoplay','autoplay');
               //--创建页面监听,等待微信端页面加载完毕 触发音频播放
               document.addEventListener('WeixinJSBridgeReady', function() {
                   document.getElementById('mp3Btn').play()
               });

               document.addEventListener('DOMContentLoaded', function () {
                   function audioAutoPlay() {
                       var audio = document.getElementById('mp3Btn');
                       audio.play();
                       document.addEventListener("WeixinJSBridgeReady", function () {
                           audio.play();
                       }, false);
                   }
                   audioAutoPlay();
               });
            }

       }

 //判断离开此页面,音乐的状态~1表示播放,2表示暂停;
         function Checkaudio(){
             if($('.audiojs').hasClass('playing')){
                 Storage.setItem('audioplay',1)
             }else{
                 Storage.setItem('audioplay',2)
             }
         }

3.因为上边的事件在ios不起作用,所以应用了: window.addEventListener('pagehide', function () {});

 if(isiOS){
           if(audioplay==2){
               $('.audiojs').removeClass('playing');
           }else{
               $('audio').attr('autoplay','autoplay');
               //--创建页面监听,等待微信端页面加载完毕 触发音频播放
               document.addEventListener('WeixinJSBridgeReady', function() {
                   document.getElementById('mp3Btn').play()
               });

               document.addEventListener('DOMContentLoaded', function () {
                   function audioAutoPlay() {
                       var audio = document.getElementById('mp3Btn');
                       audio.play();
                       document.addEventListener("WeixinJSBridgeReady", function () {
                           audio.play();
                       }, false);
                   }
                   audioAutoPlay();
               });
           }
       }


//ios不支持window.onbeforeunload
       window.addEventListener('pagehide', function () {
           if($('.audiojs').hasClass('playing')){
               Storage.setItem('audioplay',1)
           }else{
               Storage.setItem('audioplay',2)
           }
       });
原文地址:https://www.cnblogs.com/zxcc/p/9707286.html