在客户端js中使用缓存数据的最佳方法是什么？

Question

我的应用程序使用具有有限数量请求的API从另一台服务器接收数据.数据变化很少,但即使刷新页面后也可能需要.

1. 使用cookie或HTML5 WebStorage,这个问题的最佳解决方案是什么？
2. 并可能有其他方法来解决这个任务？

Answer 1

尽管跨浏览器兼容性很重要,但cookie它是唯一的选择,而不是Web存储.

但问题实际上取决于您缓存的数据类型？

对于您正在尝试的内容,可能根本不需要cookie和Web存储.

• Cookie用于存储配置相关信息,而不是实际数据本身.
• Web存储支持持久数据存储,类似于cookie,但具有大大增强的容量,并且HTTP请求头中没有存储信息.^[1]

我宁愿说,将整个页面缓存为cookie或web-storage都是愚蠢的.出于这些目的,服务器端缓存选项可能是更好的方法.

更新:

引用:

有关某些社交网络中用户活动的数据(fb,vk,google +)

检测网络存储功能,使用像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

我写了这个库来解决同样的问题：

使用 cacheJS 使用 Javascript 缓存您的数据

以下是一些基本用法

// 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'})