angularJsでブラウザキャッシュをクリアする方法-jsチュートリアル-php.cn

angularJsでブラウザキャッシュをクリアする方法

小云云

リリース： 2017-12-07 15:52:32

オリジナル

2243 人が閲覧しました

キャッシュは、将来のリクエストをより速く処理できるように、データを透過的に保存するコンポーネントです。繰り返しリソースを取得すると、データの重複が発生し、時間がかかる場合があります。したがって、キャッシュは変動の少ない一部のデータに適しており、キャッシュで処理できるリクエストが増えるほど、システム全体のパフォーマンスが向上します。この記事では、angularJs でブラウザのキャッシュをクリアする方法を紹介します。

ブラウザキャッシュ。Webサイトのパフォーマンスとブラウザの速度を向上させ、Webサイトのパフォーマンスを向上させることができるため、必要になることがあります。ただし、キャッシュによって問題が発生したり、誤ったデータが表示されたりする可能性があるため、キャッシュをクリアする必要がある場合があります。たとえば、ストック Web サイトはリアルタイムで更新されますが、Web サイトによってはほとんど更新されないため、キャッシュが必要です。

以下はブラウザをクリアする従来の方法です

メタメソッド

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

ログイン後にコピー

フォームの一時キャッシュを削除します

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

ログイン後にコピー

乱数を使用することも、キャッシュを回避する非常に良い方法です。

Add "?ran=" + Math.random(); //もちろん、ここで実行されるパラメータは任意に選択できます

乱数と同じランダム時間を使用します。

"?timestamp= + new Date().getTime(); を追加します。

php バックエンドを使用してクリーンアップします

header("Cache-Control: no-cache , must-revalidate");など (php など)

以下では、angularJs プロジェクトでブラウザをクリアする方法を紹介します。もちろん、上記の従来の方法も適用できますが、angularJs の場合は、次の項目を追加する必要があります。

1. テンプレートのキャッシュをクリアします

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

ログイン後にコピー

2. 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" >

ログイン後にコピー

3. ルートキャッシュをクリアします

.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;;

ログイン後にコピー