クライアントサイドのjsでデータをキャッシュするのに最適な方法は何ですか？

Question

私のアプリケーションは、要求数が限られているAPIを使用して、別のサーバーからデータを受信します。データはまれにしか変わりませんが、ページを更新しても必要な場合があります。

1. cookieまたはHTML5を使用してこの問題を解決するにはどうすればよいですか？ WebStorage？
2. このタスクを解決する他の方法があるかもしれませんか？

Answer 1

ブラウザの互換性の問題と同様に、cookieはウェブストレージではなく唯一の選択肢です。

しかし、質問は本当に依存していますどのような種類のデータをキャッシュしていますか？

あなたが試みていることでは、クッキーとウェブストレージはまったく必要ないかもしれません。

• Cookieは、実際のデータそのものではなく、設定に関連する情報を格納するために使用されます。
• ウェブストレージは、クッキーに似ていますが、容量が大幅に強化され、HTTPリクエストヘッダーに情報が格納されていない永続データストレージをサポートしています。 ^[1]

私はむしろクッキーやウェブストレージの両方としてページ全体をキャッシュする愚かなことだろう、と言うでしょう。これらの目的のために、サーバー側のキャッシュオプションがより良い方法かもしれません。

更新：

が引用：いくつかのソーシャルネットワークでのユーザーアクティビティに関する

データ（FB、VK、グーグル+）

は、ライブラリを使用して、ウェブストレージ機能を検出mordernizrのように、存在しない場合は、Cookieメソッドに戻ります。 簡単な例

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

---

[1]：http://en.wikipedia.org/wiki/Web_storage

Answer 2

私は同じ問題を解決するために、この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'})