在客户端使用 js 缓存数据的最佳方式是什么？答案

【问题标题】：What's the best way use caching data in js on client side?在客户端使用 js 缓存数据的最佳方式是什么？
【发布时间】：2026-01-17 20:40:01
【问题描述】：

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

什么是这个问题的最佳解决方案，使用 cookie 或 HTML5 网络存储？
还有其他方法可以解决这个任务吗？

【问题讨论】：

标签： javascript html cookies web-storage

【解决方案1】：

就跨浏览器兼容性而言，cookie 是唯一的选择，而不是网络存储。

但问题实际上取决于您正在缓存什么样的数据？

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

Cookie 用于存储配置相关信息，而不是实际数据本身。
Web 存储支持持久数据存储，类似于 cookie，但容量大大增强，并且 HTTP 请求标头中不存储任何信息。 ^[1]

我宁愿说，将整个页面缓存为 cookie 或网络存储两者都是愚蠢的。出于这些目的，服务器端缓存选项可能是更好的方法。

更新：

引用：

有关用户在某些社交网络（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

【讨论】：

什么样的数据...嗯。例如，有关某些社交网络（fb、vk、google+）中的用户活动的数据。在服务器端缓存数据对我来说非常糟糕，因为数据太多 =) 这个应用程序的跨浏览器兼容性不是主要任务，这个应用程序是为现代浏览器设计的。
如果你能做到if(localStorage)，为什么还要使用Modernizr？
@JanDvorak，这是 2012 年与网络相关的答案 :)
如果某个男孩在这么多年后仍在阅读这篇文章，对于本地存储，这个项目可能会有所帮助：github.com/localForage/localForage

【解决方案2】：

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

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

【讨论】：

【解决方案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];
    }
}

【讨论】：