[Javascript] 자바스크립트 cache 로드때 코드 갱신 쿠키삭제 캐시삭제 로드 브라우져 캐시 우회하기 관련

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

 

html 캐시삭제, 캐시방지 방법 모음

 

http://202psj.tistory.com/763

 

 

 

 

Web Storage 웹 스토로지 관련

 

http://202psj.tistory.com/1187

 

 

 

=======================

=======================

=======================

 

 

 

출처: https://stackoverflow.com/questions/15804462/how-to-clear-localstorage-sessionstorage-and-cookies-in-javascript-and-then-ret

 

 

How to completely clear localstorage, sessionStorage and cookies in javascript ?

Is there any way one can get these values back after clearing them ?

 

how to completely clear localstorage

localStorage.clear();

how to completely clear sessionstorage

sessionStorage.clear();

[...] Cookies ?

var cookies = document.cookie;  for (var i = 0; i < cookies.split(";").length; ++i) {     var myCookie = cookies[i];     var pos = myCookie.indexOf("=");     var name = pos > -1 ? myCookie.substr(0, pos) : myCookie;     document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; }

is there any way to get the value back after clear these ?

No, there isn't. But you shouldn't rely on this if this is related to a security question.

 

 

=======================

=======================

=======================

 

 

 

출처: https://www.lesstif.com/pages/viewpage.action?pageId=20775788

 

Java Servlet

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1. response.setHeader("Pragma", "no-cache"); // HTTP 1.0. response.setDateHeader("Expires", 0); // Proxies.

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

모든 브라우저에서 다되는지는 아직 확인 못해보았다~!

 

 

<!-- Cache Refresh-->
<script>
var url = location.href;
var tmpUrl = url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
var oReq = new XMLHttpRequest();
oReq.open("GET", tmpUrl,

false

); //또는 oReq.open("GET", tmpUrl, true);

oReq.send(null);

</script>

 

 

=======================

=======================

=======================

 

 

 

반응형

 

 

728x90

 

 

출처: http://gafani.tistory.com/entry/Javascript-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%B8-%EC%BA%90%EC%8B%9C-%EC%9A%B0%ED%9A%8C%ED%95%98%EA%B8%B0

 

 

XMLHttpRequest 객체를 이용해 서버와 AJAX 통신을 하던 도중, 다음과 같은 문제가 발생하였습니다.

 

 - A.js 파일을 수정한 후 해당 파일을 비동기로 로드했지만, 수정되지 않은채 로드가 되었습니다.

 

구글링 통해 알아본 결과 브라우져에서 캐싱하는듯 합니다. 브라우져에서 캐시를 삭제한 후 다시 로드하니 수정된 내용이 로드되었습니다.

 

조금 더 구글링 해본 결과 Mozilla 사이트에서 해당 내용을 우회할 수 있는 법이 있었습니다. (원문 바로 가기)

 

내용을 보아 하니 캐시를 우회하는 법은 요청하려는 URL 뒤에 timestamp를 붙여주는 것입니다. "?" 또는 "&" 말이지요.

 

샘플을 보시면:

 

http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345

이렇게 말이죠. 

 

하지만 하드코딩하지 않는 이상, 매번 저렇게 하기엔 동적이지 않아 다음처럼 자동으로 URL을 만들어 줄 수 있다고 하네요:

 

var oReq = new XMLHttpRequest();  oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); oReq.send(null);

 

이렇게 작성 하시면, 호출 할 때마다 현재 timestamp를 URL 뒤에 "?" 또는 "&" 자동으로 붙여 줍니다.

출처: http://gafani.tistory.com/entry/Javascript-브라우져-캐시-우회하기 [Sanctuary]

 

 

 

=======================

=======================

=======================

 

 

 

출처: http://fronteer.kr/bbs/view/63

 

javascript 및 css 파일은 기본적으로 Brower 에 cache 됩니다.

가끔씩 수정한 js, css 파일이 적용되지 않은 것은 바로 이 cache 때문이죠.

Browser 차원에서 cache 를 삭제하면 수정된 js,css 파일이 반영됩니다만,
이용자들에게 일일이 cache 를 삭제하라고 요청할 수는 없는 일이죠.

이런 경우, 강제로 새로 변경된 js, css 파일을 적용할려면
js,css 의 URL 뒤에 "?" + Timestamp 형태를 붙여주면 됩니다.

예컨대

• link rel="stylesheet" href="/css/common.css?20140630151000"
• script type="text/javascript" src="/js/meta.js?20140630151000"

이련 형태가 되겠죠,

 

원리는
cache 가 QueryString 을 보함한 URL 을 기준으로 이루어지기 때문에
다른 파일로 인식하게 되는 셈이죠.

 

 

=======================

=======================

=======================

 

 

 

출처: https://www.letmecompile.com/css-js-%ED%8C%8C%EC%9D%BC-%EC%BA%90%EC%8B%9C-%EB%B0%A9%EC%A7%80/

 

웹사이트를 운영하다보면 웹사이트의 디자인이나 프론트엔드 동작을 바꾸기 위해서 CSS 또는 javascript 파일을 수정하는 일이 종종 생기게 된다. 이때 수정된 파일을 서버로 배포하더라도, 기존 웹사이트를 이용하던 유저의 브라우저 캐쉬때문에 수정된(fresh) 파일을 다운로드 하지 않고 캐쉬를 이용하게되어 웹사이트가 깨져보이게되는 경우가 있다.

사용중인 웹서버에서 특정 파일에대한 캐쉬설정을 적절히 바꿔서 Http Response Header에 캐쉬관련 지시자나 E-Tag 등이 잘 포함되게 설정해주면, 브라우저에서 expired 된 캐쉬가 사용되는 것을 적절히 막을 수 있지만, 직접 웹서버를 운영하지 않고 웹 호스팅서비스를 이용하는 경우 쉽지 않은 일이며, 정확하게 설정되지 않을경우 브라우저마다 미묘하게 동작이 달라서 원하는 결과를 완벽하게 얻지 못할때도 있다.

오래된 캐쉬(stale cache) 사용 막으려면?

이런 상황에서 캐쉬문제를 해결하기 위해서 가장 확실하고 간단한 방법은 캐쉬 자체의 기본 동작 방식을 역이용하는 것이다.

기본적으로 캐쉬의 동작은 URL을 기준으로 기존에 동일한URL에 요청한 적이 있었는지를 판단하게 된다. 쉽게 바꿔말하면, 해당 수정된 파일의 URL을 바꿔주면 기존의 캐쉬에 의해 영향을 받지 않을 수 있게 되는 것이다.

URL을 바꾸는 방법

• 무식한 방법: 수정이 그리 자주되지 않는 파일이라면, 해당 수정된 CSS/JS 파일명을 아예 바꿔버리고, 해당 파일을 로딩하는 HTML 코드쪽에서도 수정된 파일명을 넣어주면 된다.
• 좀더 스마트한 방법: 위 방법이 번거로울 경우 CSS/JS 파일명은 유지하는 대신 HTML 코드쪽에서 불러올때 버전 쿼리스트링을 붙여주는 방법이 매우 유용하다. 다음 예시를 살펴보자.
  
  =======================
  
  
  
  조금 더 응용한다면, server side 프로그램에서 해당 HTML 코드를 출력할때 ver 대신 해당 파일의 modified date가 자동으로 쿼리스트링으로 붙도록 개발해둘 경우, 수정되는 즉시 자동으로 반영되는 편리함을 누릴 수 있을것이다.
•  
• =======================
• =======================
•  

  1 2	<link href="http://example.com/custom.css" rel="stylesheet" type="text/css" />

• 위 코드의 경우 ?ver=1.1 이라고 파일명 뒤에 쿼리스트링을 붙여주었다. custom.css를 수정한 후, 번거롭게 파일명을 바꾸는 대신 ver 값만 다르게 주면 다른 URL로 인식되기 때문에 캐쉬된 파일이 사용되는것을 방지할 수 있다.
•  

  1 2	<link href="http://example.com/custom.css?ver=1.1" rel="stylesheet" type="text/css" />

• 위 코드의 경우 custom.css 파일이 수정되더라도, 적절한 캐쉬 지시자가 적용되지 않은경우 기존 웹사이트 이용하던 유저들이 수정된파일이 아닌 캐쉬된 파일을 보게될 확률이 크다. 이를 해결한 아래 코드를 보자.
•  

관련 포스트:

• 도메인 주소에서 www 없애기
• 나눔고딕 구글 웹폰트(Webfont) 사용하기
• ARC (Automatic Reference Counting) 관련 키워드…
• IE 버전별 웹사이트 테스팅 팁
• iOS 타이틀레이블 위치 강제 조정

 

 

=======================

=======================

=======================

 

 

 

출처: http://mindopener.tistory.com/entry/XMLHttpRequest-%EC%BA%90%EC%89%AC-%EB%AC%B8%EC%A0%9C-%EC%B2%98%EB%A6%AC-ajax-%EC%BA%90%EC%89%AC

 

 

캐시 문제

- XMLHttpRequest는 기본적으로 동일한 url을 호출할 경우 캐시 기능을 제공한다.

- 캐시 기능을 원하지 않을 경우, 요청하려는 url 뒤에 현재시간을 parameter로 추가하여 동일한 url이라도 호출할 때마다 매번 url이 달라지도록 하여 캐시문제를 해결한다.

var xhr = new XMLHttpRequest(); var url = "http://ggobugi.tistory.com"; xhr.open('GET', url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); xhr.onreadystatechange = function() { 　　if (xhr.readyState == 4) { 　　　　if (xhr.status == 200 || xhr.status == 0) { 　　　　　　console.log("success!"); 　　　　} else if (xhr.status == 404) { 　　　　　　console.error("not found!"); 　　　　} 　　} }; xhr.send(null); 

jQuery의 경우 cache 옵션이 존재하며, 이 값을 설정해주면 된다.

var ajaxReq = $.ajax({ 　　url: "http://ggobugi.tistory.com", 　　cache: false 　　statusCode: { 　　　　404: function() { 　　　　　　console.error("not found!"); 　　　　} 　　} }) .done(function(data) { 　　console.log("success!"); }) .fail(function() { 　　console.error("fail!"); });

출처: http://mindopener.tistory.com/entry/XMLHttpRequest-캐쉬-문제-처리-ajax-캐쉬 [Developer`s Tea Time ~~]

 

 

=======================

=======================

=======================

 

 

 

#기타관련링크

 

- https://code.i-harness.com/ko-kr/q/7e9e // 클라이언트가 JavaScript 파일을 새로 고칠 수 있도록하려면 어떻게해야합니까?

 

- http://cyberx.tistory.com/9 //더 빠른 웹을 위하여 - 웹 캐쉬 (WEB CACHE)

 

 

=======================

=======================

=======================