2012-10-07 4 views
6

내 응용 프로그램은 제한된 수의 요청으로 API를 사용하여 다른 서버에서 데이터를받습니다. 드물게 변경되는 데이터이지만 새로 고침 페이지 후에도 필요할 수 있습니다.클라이언트 쪽에서 js의 캐싱 데이터를 사용하는 가장 좋은 방법은 무엇입니까?

  1. 쿠키 또는 HTML5를 사용하는 가장 좋은 해결책은 무엇입니까 WebStorage?
  2. 그리고이 작업을 해결하는 다른 방법이있을 수 있습니까?

답변

5

크로스 브라우저 호환성 문제만큼 웹 저장소가 아닌 cookie이 유일한 선택입니다.

그러나 질문은 실제로 어떤 종류의 데이터를 캐싱합니까 에 따라 달라집니다?

쿠키와 웹 저장소는 필요하지 않을 수도 있습니다.

  • 쿠키는 실제 데이터 자체가 아니라 구성 관련 정보를 저장하는 데 사용됩니다.
  • 웹 저장소는 쿠키와 비슷하지만 용량이 크게 향상되고 HTTP 요청 헤더에 정보가 저장되지 않는 영구 데이터 저장소를 지원합니다. [1]

나는 오히려 쿠키 또는 웹 스토리지 모두로 전체 페이지를 캐시하는 바보 될 것이라고 말할 것입니다. 이러한 목적으로 서버 측 캐싱 옵션이 더 나은 방법 일 수 있습니다.

업데이트 :

가 인용 : 사용자 활동에 대한

데이터를 일부 소셜 네트워크에 (FB, VK, 구글 +)

이 라이브러리를 사용하여, 웹 스토리지 기능을 감지 mordernizr처럼 존재하지 않는 경우 쿠키 방법으로 전환하십시오. 간단한 예

if (Modernizr.localstorage) { 
    // browser supports local storage 
    // Use this method 
} else { 
    // browser doesn't support local storage 
    // Use Cookie Method 
} 

[1] :

+0

어떤 종류의 데이터 ... hmmm. 예를 들어 일부 소셜 네트워크 (fb, vk, google +)의 사용자 활동에 대한 데이터입니다. 많은 데이터 =)이 응용 프로그램에 대한 크로스 브라우저 호환성은 주요 작업이 아니기 때문에, 나에게 매우 나쁜 방법으로 서버 측에서 데이터를 캐싱,이 응용 프로그램은 현대적인 브라우저를 위해 만들었습니다. – artzub

+0

@artzub, 내 업데이트 확인 – Starx

+0

Thx, 봐요! – artzub

4

http://en.wikipedia.org/wiki/Web_storage는 I 같은 문제 해결이 LIB 썼다 여기 Cache your data with Javascript using cacheJS

는 기본적인 사용법이다를

// just add new cache using array as key 
 
cacheJS.set({blogId:1,type:'view'},'<h1>Blog 1</h1>'); 
 
cacheJS.set({blogId:1,type:'json'}, jsonData); 
 

 
// remove cache using key 
 
cacheJS.removeByKey({blogId:1,type:'json'}); 
 

 

 
// add cache with ttl and contextual key 
 
cacheJS.set({blogId:2,type:'view'},'<h1>Blog 2</h1>', 3600, {author:'hoangnd'}); 
 

 
cacheJS.set({blogId:3,type:'view'},'<h1>Blog 3</h1>', 3600, {author:'hoangnd'}); 
 

 

 
// remove cache with con textual key 
 
// cache for blog 2 and 3 will be removed 
 
cacheJS.removeByContext({author:'hoangnd'})