.json 파일로 GET에 응답하는 웹 서버가 있다고 가정 해 봅니다. 해당 GET에 대한 응답은 브라우저가 5 년 동안 응답을 캐시하도록 지정합니다.웹 개발 : localStorage 대 캐시 된 HTTP
페이지가로드 될 때 JSON 데이터에 대한 GET 요청을하는 웹 페이지가 있다고 가정 해 보겠습니다. 응답이 돌아 오면 JSON 데이터는 localStorage에 저장됩니다. 이 시점에서
, 내가 될 것이다, 다시 JSON 데이터를 검색 할하려면 빨리 :
localStorage자동 테스트 또는 예제로 증명할 수 있습니까?
답변이 정확한 이유는 무엇입니까?
현대의 UA (브라우저)에서는이 두 접근법 중 어느 것도 무시할 수없는 경우 차이점이 있습니다.
내 대답이 정확한 이유는 무엇입니까? 왜냐하면 두 가지 메커니즘을 모두 구현했기 때문입니다.
나는 당신이 틀린 질문을하고 있다고 생각합니다. 활성 세션 중에 이 더 빠릅니다.은 기본적으로 관련이 없으며, 둘 다 로컬에 저장되고 로컬 조회는 거의 즉각적입니다 (원격 조회와 비교). (하나의주의 사항 : 모든 브라우저가 캐싱 헤더에 의존하는 것은 아니지만 보통 캐싱 부족이 아닌 오버 캐싱에 더 많이 의존합니다.) 예를 들어, 브라우저의 캐시가 지워지지 않는다고 가정 할 때 . 이것은 일반적으로 잘못되었습니다. 사용자가 언제든지 캐시를 지울 수있을뿐만 아니라 자동으로 지워지도록 설정할 수도있을뿐만 아니라 브라우저 자체에서 웹 사이트의 캐시 된 데이터를 마음대로 (일반적으로 공간에 따라) 제거할지 결정할 수 있습니다.
대신 데이터의 수명 및 사용자가 얼마나 자주 다시 찾고 있는지 생각해야합니다.
이 정보가 가끔씩 만 액세스 할 수있는 내용이면 브라우저의 기본 제공 캐싱 메커니즘에 의존해야합니다. 이렇게하면 더 이상 필요하지 않을 때 브라우저가 브라우저를 제거 할 수 있습니다.
그러나 데이터가 정기적으로로드되거나 사이트를 방문 할 때마다 필요하다면 localStorage을 사용해야합니다. 로컬 저장 장치는 이 아니며 캐시와 함께 자동으로 지워지는이 아니며 실제로 사용자가 해당 웹 사이트의 쿠키를 지우면 실제로 비워집니다. 이렇게하면 웹 사이트를 정기적으로 방문하지 않아도 캐시가 새로 고쳐 지더라도 정보를 훨씬 오래 보존 할 수 있습니다. 그러나 갑자기 이제는 그 정보 데이터베이스를 유지할 책임이 있습니다.
마지막으로 가장 중요한 질문은 개발자로서 더 복잡한 localStorage 기반 솔루션을 개발할 때의 비용 편익 트레이드 오프입니까? 즉, 최종 사용자가 1 ~ 2 회 조회를 캐싱하는 데 충분한 이익을 얻으 려하는지, 또는 상당한 양의 정보에 대해 이야기하고 있는지, 사용자가 30 초 이상의 이익을 보게되는지 여부입니다.
예로서, I가 한참 개발 크고 복잡한 웹 애플리케이션, I는 JS 라이브러리의 많은 저장
localStorage사용. 사이트를 다시 방문하면 해시를 확인한 후 로컬 사본에서 파싱됩니다. 이 솔루션을 사용하면 광범위한 브라우저에서 캐시를 지우더라도 시작 시간이 크게 단축되었습니다. (이것이 좋은 사용법은 아니지만 그 당시에는 작동했습니다.)
두 출처에서 localStorage가 브라우저 캐시의 속도를 빠르게 처리한다고합니다.
다음은 로컬 스토리지에서 자바 스크립트 파일을로드에 필자는
전체 라이브러리 :
function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};
라이브러리
requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
requireScript('examplejs', '0.0.3', 'example.js');
});