Javascript 在客户端使用 js 缓存数据的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12770185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the best way use caching data in js on client side?
提问by Artem Zubkov
My application receives data from the another server, using API with limited number of requests. Data changing rarely, but may be necessary even after refresh page.
我的应用程序使用请求数量有限的 API 从另一台服务器接收数据。数据很少更改，但即使在刷新页面后也可能是必要的。
- What's the best solution this problem, using cookie or HTML5 WebStorage?
- And may be have other way to solve this task?
- 使用 cookie 或 HTML5 WebStorage 解决此问题的最佳方法是什么？
- 并且可能有其他方法来解决这个任务？
采纳答案by Starx
As much as cross browser compatibility matters, cookieis the only choice rather than web storage.
尽管跨浏览器兼容性很重要，但cookie它是唯一的选择，而不是 Web 存储。
But the question really depends on what kind of data you are caching?
但问题真的取决于你缓存的数据类型是什么？
For what you are trying, cookie and web-storage might not be needed at all.
对于您正在尝试的内容，可能根本不需要 cookie 和网络存储。
- Cookies are used to store configuration related information, rather than actual data itself.
- Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. [1]
- Cookie 用于存储配置相关信息，而不是实际数据本身。
- Web 存储支持持久性数据存储，类似于 cookie，但容量大大增强，并且 HTTP 请求头中不存储任何信息。[1]
I would rather say, it would be stupid to cache the entire page as cookie or web-storage both. For these purposes, server-side caching options might be the better way.
我宁愿说，将整个页面缓存为 cookie 或 web-storage 两者都是愚蠢的。出于这些目的，服务器端缓存选项可能是更好的方法。
Update:
更新：
Quoting:
引用：
data about user activity in some social networks (fb, vk, google+)
有关某些社交网络（fb、vk、google+）中用户活动的数据
Detect the web-storage features, using libraries like mordernizrand if does not exists fall back to cookie method. A simple example
检测网络存储功能，使用像modernizr这样的库，如果不存在则回退到 cookie 方法。一个简单的例子
if (Modernizr.localstorage) {
// browser supports local storage
// Use this method
} else {
// browser doesn't support local storage
// Use Cookie Method
}
回答by HoangND
I wrote this lib to solve the same problem:
我写了这个库来解决同样的问题：
Cache your data with Javascript using cacheJS
使用 cacheJS 使用 Javascript 缓存您的数据
Here are some basic usages
以下是一些基本用法
// 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'})回答by tom
its really simple. just do this (example)
它真的很简单。就这样做（示例）
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];
}
...then in the call back write the value to the cache
...然后在回调中将值写入缓存
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];
}
}
