집 >웹 프론트엔드 >JS 튜토리얼 >AngleJs에서 브라우저 캐시를 지우는 방법

AngleJs에서 브라우저 캐시를 지우는 방법

小云云원래의: 2017-12-07 15:52:322269검색

캐시는 향후 요청을 더 빠르게 처리할 수 있도록 데이터를 투명하게 저장하는 구성 요소입니다. 반복적으로 리소스를 획득하면 데이터가 중복되어 시간이 소모될 수 있습니다. 따라서 캐싱은 변동성이 거의 없는 일부 데이터에 적합합니다. 캐시가 처리할 수 있는 요청이 많을수록 전체 시스템 성능이 더 많이 향상될 수 있습니다. 이 기사에서는 AngleJs에서 브라우저 캐시를 지우는 방법을 공유합니다.

브라우저 캐시는 웹사이트 성능과 브라우저 속도를 향상하고 웹사이트 성능을 향상시킬 수 있기 때문에 가끔 필요할 때가 있습니다. 하지만 캐시로 인해 문제가 발생하고 일부 잘못된 데이터가 나타날 수 있으므로 캐시를 지워야 하는 경우도 있습니다. 예를 들어, 주식 웹사이트는 실시간으로 업데이트됩니다. 이러한 웹사이트는 캐시할 필요가 없습니다. 일부 웹사이트는 거의 업데이트되지 않으므로 캐시를 보유하는 것이 좋습니다.

다음은 브라우저를 지우는 전통적인 방법입니다

메타 방법

//不缓存 
<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(); //물론 여기서 실행되는 매개변수는 임의로 선택할 수 있습니다.

난수와 마찬가지로 임의의 시간을 사용합니다.

Add "?timestamp=" + new Date().getTime();

PHP 백엔드를 사용하여 정리

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

AngleJs에서 브라우저 캐시를 지우는 방법

관련 기사