Question

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

使用cookie或HTML5解决此问题的最佳方法是什么 WebStorage？
可能还有其他方法可以解决这个问题吗？

Answer 1

尽管跨浏览器兼容性很重要，cookie是唯一的选择，而不是网络存储。

但问题实际上取决于 您正在缓存哪种数据？

对于您正在尝试的内容，可能根本不需要cookie和网络存储。

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

我写了这个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'})

Answer 3

这里是从JQuery AJAX缓存数据的示例。因此，如果您只想在没有数据的情况下拨打电话，那真的很简单。只是这样做（示例）。在这里，我们首先检查是否有加载信息（在行，位置和发货日期上键入），只有在没有加载信息的情况下，我们才进行AJAX调用并将该数据放入缓存中：

var dict = [];

function checkCachedLoadLine(line, location, shipDate, callback) {
    var ret = 0;
    if(!((line+location+shipDate) in dict)) {
        productionLineService.getProductionLoadLine(line, location, shipDate, callback);
    }
    return dict[line+location+shipDate];
}

...然后在回调中将值写入缓存

function callback(data) {
    if (!data) {
        document.getElementById('htmlid').innerHTML = 'N/A';
    } else {
        document.getElementById('htmlid').innerHTML = data[0];
        dict[data[2]+data[3]+data[4]] = data[0];
    }
}

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

3 个答案: