首頁 > web前端 > js教程 > 在angularJs中如何實作清除瀏覽器緩存

在angularJs中如何實作清除瀏覽器緩存

亚连
發布: 2018-06-23 17:31:47
原創
1751 人瀏覽過

這篇文章主要介紹了關於angularJs清除瀏覽器快取的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

快取篇

一個快取就是一個元件,它可以透明地儲存數據,以便以後可以更快地服務於請求。多次重複地取得資源可能會導致資料重複,消耗時間。因此快取適用於變化性不大的一些數據,快取能夠服務的請求越多,整體系統效能就能提升越多。

瀏覽器緩存,有時候我們需要他,因為他可以提高網站效能和瀏覽器速度,提高網站效能。但是有時候我們又不得不清除緩存,因為緩存可能誤事,出現一些錯誤的資料。像股票類網站即時更新等,這樣的網站是不要快取的,像有的網站很少更新,有快取還是比較好的。

以下是傳統的清除瀏覽器的方法

meta方法

//不缓存 
<META HTTP-EQUIV="pragma" CONTENT="no-cache">  
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">  
<META HTTP-EQUIV="expires" CONTENT="0">
登入後複製

清理form的暫存快取

<body onLoad="javascript:document.yourFormName.reset()">
登入後複製

ajax清除快取

$.ajax({ 
   url:&#39;www.haorooms.com&#39;, 
   dataType:&#39;json&#39;, 
   data:{}, 
   cache:false,  
   ifModified :true , 
 
   success:function(response){ 
     //操作 
   } 
   async:false 
 });
登入後複製

用隨機數,隨機數也是避免快取的一個很不錯的方法!

URL 參數後面加上 "?ran=" Math.random(); //當然這裡參數 ran可以任意取了 

用隨機時間,和隨機數一樣。

在URL 參數後面加上"?timestamp=" new Date().getTime();  

用php後端清理

在服務端加上header("Cache-Control: no-cache, must-revalidate");等等(如php中) 

下面介紹關於angularJs專案中清除瀏覽器的方法,當然以上傳統的方法也是可以適用的,但對於angularJs還需添加以下幾項:

一、清除模板快取

.run(function($rootScope, $templateCache) {  
      $rootScope.$on(&#39;$routeChangeStart&#39;, function(event, next, current) {  
        if (typeof(current) !== &#39;undefined&#39;){  
          $templateCache.remove(current.templateUrl);  
        }  
      });  
    });
登入後複製

#二、html新增隨機參數

.state("content", { 
        url: "/", 
        views:{ 
          "bodyInfo":{templateUrl: &#39;tpls/bodyInfo.html?&#39;+ +new Date(), 
            controller:&#39;bodyInfoCtrl&#39;}, 
          "header":{templateUrl: &#39;tpls/header.html?&#39;+ +new Date(), 
            controller:&#39;headerCtrl&#39; 
          }, 
          "footer":{templateUrl: &#39;tpls/footer.html?&#39;+ +new Date(), 
            controller:&#39;footerCtrl&#39; 
          } 
        } 
      })
登入後複製
<link rel="stylesheet" href="stylesheets/main.css?version=1.0.3" rel="external nofollow" >
登入後複製

三、清除route快取

.config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;,&#39;$locationProvider&#39;,&#39;$httpProvider&#39;,function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { 
//     $urlRouterProvider.when("", "/home"); 
      $urlRouterProvider.otherwise(&#39;/&#39;); 
       if (!$httpProvider.defaults.headers.get) { 
       $httpProvider.defaults.headers.get = {}; 
      } 
      $httpProvider.defaults.headers.common["X-Requested-With"] = &#39;XMLHttpRequest&#39;; 
      $httpProvider.defaults.headers.get[&#39;Cache-Control&#39;] = &#39;no-cache&#39;; 
      $httpProvider.defaults.headers.get[&#39;Pragma&#39;] = &#39;no-cache&#39;;
登入後複製

好了…就這麼多了

如果還有其他方法歡迎指點迷津!

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Vue.js中如何實作元件間迴圈引用

在Vue中有關於非同步元件的範例

在nodejs中如何解決超出最大的呼叫堆疊錯誤

#在Vue SpringBoot中如何實作部落格管理平台

以上是在angularJs中如何實作清除瀏覽器緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板