iso移动Safari页面缓存

iso在某些方法为了追求更好的客户体验真的很棒，但也让它和别的浏览器不一样，让开发人员头痛的很。

比如最近做一个项目，但都不能分享，但出现了很不好的效果，在当前页面时是禁止分享了，但当前页到

下一个页面后后退到之前的当前页就出现了分享功能了，这是Safari特殊的缓存机制效果，就是有点像单页面

应用可以来回切换页面而启用和暂定页面，而不是刷新页面部分功能，比如安卓，虽然有缓存机制，但它只是缓存

某些功能，比如滚动高度等，它还是会执行js文件的，但iso不是这样，它是暂定页面功能，当你切换回来还会继续

执行上一次执行的代码，比如我在页面设置一个定时器，当切换回来还会接上一次继续执行。

所有Safari鼓励我们使用window.onpageshow事件来触发某些因切换回来需要执行的代码，如触发微信内置的方法，

因为微信在这方法是和安卓的一样，会刷新功能，所以你需要触发某些内置方法，变回初始进来页面的所需的效果。

资料：传送门这方面资料还是国外比较全，国内的资料大部分一些垃圾，没有一些全面性，而且方法统一有bug。

如使用popstate，pushState配合使用，这也有个很大坑就是刷新页面会出现两次后退才能后退。。。。

而国外有popstate，pushState，浏览器本地缓存配合使用。。。这个方法逻辑复杂很

popstate，replaceState这个比较简单。

还有就是pageshow，persisted，这个好用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pageshow测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <script src="jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
    <script src="jquery-ui-1.12.1/jquery-ui.js"></script>
    <style>
    .b{
        margin-top: 300px;
        height: 1000px;
    }
    button{
        width: 100%;
        height: 30px;
    }
    button a{
        width: 100%;
        display: block;
    }
    </style>
</head>
<body>
    <div class="b">
    <p id="times"><span>计数:</span><span id="t"></span></p>
        <button><a href="2.html">pagehide测试</a></button>
        <p id="p"></p>
        <p id="p3"></p>
        <p id="p4"></p>
        
    </div>
    <script>
    var i=0;
    setInterval(function(){
        i++;
        $("#t").html(i);
    },1000);

     $(window).on("pageshow",function(event){
         $("#p4").html("是否缓存:"+event.originalEvent.persisted);
          $("#p3").html('pageshow');
          WeixinJSBridge.call('hideToolbar');
            WeixinJSBridge.call('hideOptionMenu');
            $("#p").html('WeixinJSBridgeReady'+i);
        });
     document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
            WeixinJSBridge.call('hideOptionMenu');
            $("#p").html('WeixinJSBridgeReady');
        });

          function isiOS(){
                  var u = navigator.userAgent;
                var isWeiXin = u.indexOf('MicroMessenger') > -1; //微信
                var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if(isWeiXin&&isiOS){
                    return true;
                }else{
                    return false;
                }
            }

    </script>
</body>
</html>

onpageshow和onpagehide

event对象也包含persisted属性