关于浏览器缓存

作者: 冰红茶ht | 来源:发表于2018-01-05 14:06 被阅读0次

浏览器缓存
一文读懂http缓存（超详细）
js浏览器相关
浏览器缓存（http缓存）
缓存、cookie、token、session、localSto
JQuery 缓存
清除浏览器缓存js文件的几种方法
“又爱又恨”的缓存
清楚浏览器缓存的几种方法
听欢哥扒一扒清除浏览器缓存js文件的几种方法

1. window.location.hash实现ajax操作或者一些点击变化逻辑浏览器的前进后退

参考原文http://blog.csdn.net/aitangyong/article/details/46455627

我们要知道在浏览器在什么时候产生历史记录

如果location.hash发生变化，那么地址栏的URL也会发生变化，同时会产生一个历史记录
当location.hash发生变化的时候，onhashchange函数。
会监听URL的变化，我们的逻辑可以在这个函数进行。

怎么变化hash和监听hash

变化hash

function recordHash(id)  
        {  
            window.location.hash=id;  
        }

监听hash

window.onhashchange=function(){  
            var hash = window.location.hash;  
            var id = parseInt(hash.substr(1));  
            showPageAtIndex(id);  
        };

下面是代码(可以观察跳转到百度的历史记录和使用hash的历史记录页面展示的不同)

<!DOCTYPE html>
<html>
<head>
    <title>页面1</title>
    <style>  
        .navigate{  
            height:100px;  
            width:300px;  
            background-color:#0000ff;  
            display:none;  
        }  
          
        .home{  
            height:100px;  
            width:300px;  
            background-color:#00ff00;  
            display:none;  
        }  
          
        .last{  
            height:100px;  
            width:300px;  
            background-color:#ff0000;  
            display:none;  
        }  
    </style> 
</head>
<body>
  <div>kakakk</div>

    <input type="button" value="" onclick="toNextPageWhenClick();">  
    <button type="button" name="" value="跳转" onclick="window.location.href='http://baidu.com'">跳转到百度</button>
    <div class="home" id="0">HOME PAGE</div>  
    <div class="navigate" id="1">ajax1</div>  
    <div class="navigate" id="2">ajax2</div>  
    <div class="navigate" id="3">ajax3</div>  
    <div class="navigate" id="4">ajax4</div>  
    <div class="last" id="5">last page</div>  
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var currentPageIndex = 0;
    window.onload = function(){  
      currentPageIndex = 0;  
      showPageAtIndex(currentPageIndex);  
      recordHash(currentPageIndex);  
  }
  window.onhashchange = function () {
    console.log('-------hashChange');
    var hash = window.location.hash;
    var id = parseInt(hash.substr(1));
    showPageAtIndex(id);  
  }
  function recordHash(id) {
    window.location.hash = id;
  }
  function showPageAtIndex(id) {
    $("div[id!="+id+"]").hide();
    $("#"+id).show();
    if(isHomePage(id)) {
        $("input").attr("value","current is home page,next page=1");
    } else if(isLastPage(id)) {
        $("input").attr("value","current page="+id+", it is the end.");
    } else {
        $("input").attr("value","current page="+id+",next page="+(id+1));
    }
  }
  function toNextPageWhenClick() {
    currentPageIndex++;
    if(isValidPageIndex(currentPageIndex)) {
        // showPageAtIndex(currentPageIndex);
        recordHash(currentPageIndex);
    } else {
        return ;
    }
  }
  function isHomePage(id) {
    return id == 0;
  }
  function isLastPage(id) {
    return id == 5;
  }
  function isValidPageIndex(id) {
    return id <= 5;
  }
</script>
</html>