问题描述
在浏览了多篇文章后，
我仍然不清楚本地存储和应用缓存清单之间的区别。
After going through multiple articles,I am still not clear on the difference between Local Storage and App Cache Manifest.
另请参阅：（SO 10986026），（A List Apart）
Also referred: Is AppCache = Application Cache = Web Storage's LocalStorage? (SO 10986026), Application Cache is a Douchebag (A List Apart)
我的AIM是根据用户需求建立一个允许特定页面离线的网站。
My AIM is to build a website with specific pages be allowed offline to user on user demand.
遵循的步骤：
-
我在Chrome上开了一个网站：
并检查AppCache：chrome：// appcache-internals /
该网站已被缓存。
I opened a site on Chrome : http://www.spritecow.com/
And checked AppCache : chrome://appcache-internals/
And the site was cached.
我关闭了Chrome并重新加载了它。缓存仍在那里。我正是离线浏览所需要的
I closed Chrome and reloaded it. The cache was still there. Exactly what I need for offline browsing
现在这与本地存储有什么不同？试图找到差异，但所有网站都有目的地回答，即模板缓存的AppCache和模板内容的本地存储。
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.
某些网站不喜欢AppCache，因为它会为单行更改重新加载整个缓存。某些网站只选择本地存储。有些人选择了AppCache（模板）和Localstorage的组合。
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.
现在的疑问是：
-
客户端计算机上的本地存储。如果我仍然可以访问它，即使浏览器已关闭，AppCache存储如何不同。
Local storage stores on client machine. How does AppCache storage is different if I can still access it even browser is closed.
由于清算缓存将清除AppCache，我只会选择本地存储。
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
链接没有回答怀疑（）因为这给出了差异，但不是基于离线浏览实践的目的（这是怀疑的目的）。
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).
推荐答案
AppCache 使用清单文件来定义应该存储应用程序的文件（可以缓存）文件和资源，如HTML页面，JS脚本，CSS样式，图像......）
AppCache use 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,...)
LocalStorage 将存储数据，但不存储页面。因此，每个可以字符串化的javascript对象都可以存储在localStorage中。
LocalStorage will store data but not pages. So every javascript object that you can stringify can be stored in the localStorage.
所以AppCache和localStorage不一样，但它们是互补的。
So AppCache and localStorage aren't the same, but they are complementary.
示例
Example
想象一下网络日历你希望离线可用（注意：对于这个例子，我们在这里使用静态页面，数据加载了javascript。同样可以从动态页面进行，但这个例子使用静态）。
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).
appcache将存储html页面及其使用的资源（javascripts，css，images）来呈现页面。
当您在清单文件中放入要为下次离线访问进行缓存的所有内容时，页面将被存储，您将能够在下次访问时离线显示您的页面。
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.
但问题是，您的日历显示但是为空。本月的所有会议和活动都不存在。这是因为您的页面已存储，但您仍需要网络来加载日历中的会议。当你离线时，你没有网络...
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...
如果你想让你的所有会议都离线，你必须将它们存储在localstorage（不在appCache中，因为它不是页面，它是由JavaScript访问的数据。）
所以你需要更改你的Javascript函数：
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 :
function initApp() {
var data = loadDataWithAjax();
renderPlanning(data);
}
到此
function initApp () {
var data;
if(offline) {
data = loadFromLocalStorage();
} else {
data = loadDataWithAjax();
storeDataInLocalStorage(data);
}
renderPlanning(data);
}
这篇关于HTML5本地存储VS App缓存离线网站浏览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！