javascript HTML5 本地存储 VS 应用缓存离线网站浏览
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/32947129/
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
HTML5 Local Storage VS App Cache Offline Website Browsing
提问by zeetit
After going through multiple articles, I am still not clear on the difference between Local Storage and App Cache Manifest.
看了多篇文章,还是不太清楚Local Storage和App Cache Manifest的区别。
Also referred: Is AppCache = Application Cache = Web Storage's LocalStorage?(SO 10986026), Application Cache is a Douchebag(A List Apart)
还提到:AppCache = Application Cache = Web Storage's LocalStorage?(SO 10986026),应用程序缓存是一个混蛋(A List Apart)
My AIM is to build a website with specific pages be allowed offline to user on user demand.
我的目标是建立一个网站,根据用户的需求,允许用户离线访问特定页面。
Steps followed :
步骤如下:
I opened a site on Chrome : http://www.spritecow.com/
And checked AppCache : chrome://appcache-internals/
And the site was cached.I closed Chrome and reloaded it. The cache was still there. Exactly what I need for offline browsing
Now how is this different from local storage? Tried to find the difference but all sites answer in purpose, i.e. AppCache for templates' caching and Local Storage for content within the template.
Certain sites do not prefer AppCache as it reloads entire cache for a single line change. Certain sites prefer only local storage. While some go for the combo of AppCache(template) and Localstorage.
我在 Chrome 上打开了一个站点:http: //www.spritecow.com/
并检查了 AppCache:chrome://appcache-internals/
该站点被缓存。我关闭了 Chrome 并重新加载了它。缓存还在。正是我离线浏览所需要的
现在这与本地存储有何不同?试图找出不同之处,但所有站点都有目的的回答,即模板缓存的 AppCache 和模板内内容的本地存储。
某些站点不喜欢 AppCache,因为它会为单个行更改重新加载整个缓存。某些站点只喜欢本地存储。虽然有些人选择 AppCache(template) 和 Localstorage 的组合。
Now the doubt is :
现在的疑问是:
Local storage stores on client machine. How does AppCache storage is different if I can still access it even browser is closed.
As clearing cache will clear AppCache then i'd go for only Local Storage.
What is the best practice to be followed for offline browsing? I am completely new to this and need a little clarity on the same
本地存储存储在客户端计算机上。如果即使浏览器关闭我仍然可以访问它,AppCache 存储有什么不同。
由于清除缓存将清除 AppCache,因此我只会选择本地存储。
离线浏览应遵循的最佳做法是什么?我对此完全陌生,需要对此进行一些澄清
EDIT
编辑
The doubt is not answered by the link (Is AppCache = Application Cache = Web Storage's LocalStorage?) as this gives difference but not based on the purpose of Offline Browsing Practices (which is the aim for this doubt).
链接(Is AppCache = Application Cache = Web Storage's LocalStorage?)没有回答这个疑问,因为这给出了差异,但不是基于离线浏览实践的目的(这是这个疑问的目的)。
回答by ylerjen
AppCacheuse a manifest file to define what files used by the app should be stored (You can cache files and ressources like HTML pages, JS scripts, CSS styles, images,...)
AppCache使用清单文件来定义应存储应用程序使用的文件(您可以缓存文件和资源,如 HTML 页面、JS 脚本、CSS 样式、图像等)
LocalStoragewill store data but not pages. So every javascript object that you can stringify can be stored in the localStorage.
LocalStorage将存储数据但不存储页面。因此,您可以字符串化的每个 javascript 对象都可以存储在 localStorage 中。
So AppCache and localStorage aren't the same, but they are complementary.
所以 AppCache 和 localStorage 并不相同,但它们是互补的。
Example
例子
Imagine a web calendar that you want to be available offline (note: for this example, we use here a static page and data are loaded with javascript. The same can be made from a dynamic page, but this example use static).
想象一个你想要离线使用的网络日历(注意:对于这个例子,我们在这里使用一个静态页面,数据是用 javascript 加载的。同样可以从动态页面制作,但这个例子使用静态)。
The appcache will store the html page and the ressources that it uses (javascripts, css, images) to render you page. As you have put in your manifest file everything to be cached for the next offline access, the pages are stored and you'll be able to display your page offline at the next visit.
appcache 将存储 html 页面和它用来呈现页面的资源(javascripts、css、图像)。由于您已将所有要缓存的内容放入清单文件以供下次离线访问时使用,因此页面将被存储,您将能够在下次访问时离线显示您的页面。
But problem, your calendar is displayed but is empty. All meetings and events of the month aren't there. This is because your page is stored, but you still need network to load the meetings in your calendar. And as you're offline, you have no network...
但问题是,您的日历显示但为空。本月的所有会议和活动都不在那里。这是因为您的页面已存储,但您仍需要网络来加载日历中的会议。当你离线时,你没有网络......
If you want to have all your meetings available offline too, you'll have to store them in the localstorage (not in the appCache, because it's not a page, it's data accessed by JavaScript.) So you will need to change your Javascript function from this :
如果你也想让你的所有会议离线可用,你必须将它们存储在 localstorage 中(不是在 appCache 中,因为它不是页面,它是由 JavaScript 访问的数据。)所以你需要更改你的 Javascript 函数由此 :
function initApp() {
var data = loadDataWithAjax();
renderPlanning(data);
}
to this
对此
function initApp () {
var data;
if(offline) {
data = loadFromLocalStorage();
} else {
data = loadDataWithAjax();
storeDataInLocalStorage(data);
}
renderPlanning(data);
}
回答by iSpeakMachines
Appcache will even work if you are totally offline and your browser is closed and then you open your browser and type in the URL while still offline — the page loads! Check this site here… load it once while online and then disconnect from the Internet and close your browser … and then reopen browser and try to visit it while still offline.
如果您完全离线并且浏览器关闭,然后您打开浏览器并在离线状态下输入 URL,Appcache 甚至可以工作 - 页面加载!在此处检查此站点……在线时加载一次,然后断开与 Internet 的连接并关闭浏览器……然后重新打开浏览器并尝试在离线时访问它。
localStorage needs connection first to load the js code needed to get the data from it.
localStorage 首先需要连接来加载从中获取数据所需的 js 代码。