HTML5的离线存储原理主要是基于浏览器对一个新建的.appcache文件（或称为manifest文件）的缓存机制。这个机制不是一种存储技术，而是一个缓存机制，通过该文件上的解析清单离线存储资源。这些资源会像cookie一样被存储下来，以便在网络离线状态下，浏览器可以通过这些被离线存储的数据进行页面展示。
以下是HTML5离线存储的使用方法：
-
创建Manifest文件：
- 创建一个和HTML同名的manifest文件，例如，如果HTML文件名为
index.html，则manifest文件名可以为index.manifest。 - 在manifest文件中编写需要离线存储的资源。文件内容通常包括
CACHE MANIFEST声明、需要缓存的资源列表（使用CACHE:标签指定），以及可选的网络资源列表（使用NETWORK:标签指定）和备用资源（使用FALLBACK:标签指定）。
- 创建一个和HTML同名的manifest文件，例如，如果HTML文件名为
-
关联Manifest文件：
- 在HTML文件的
<html>标签中添加manifest属性，属性值为manifest文件的路径，如<html manifest="index.manifest">。
- 在HTML文件的
-
更新缓存：
- 当需要更新缓存时，可以修改manifest文件。浏览器在下次加载页面时会检测到manifest文件的变化，并重新下载和缓存列出的资源。
- 也可以通过JavaScript操作
window.applicationCache对象来更新缓存，例如调用applicationCache.update()方法。
-
注意事项：
- 浏览器对缓存数据的容量限制可能不同，某些浏览器设置的限制是每个站点5MB。
- 如果manifest文件或其中列举的某个文件不能正常下载，整个更新过程将失败，浏览器会继续使用旧的缓存。
- 引用manifest的HTML文件必须与manifest文件同源（位于同一个域下）。
- FALLBACK中的资源也必须与manifest文件同源。
此外，HTML5还提供了其他离线存储技术，如LocalStorage、SessionStorage和IndexedDB，这些技术适用于存储不同类型和规模的数据，但它们的工作原理与基于manifest的离线缓存机制不同。
总的来说，HTML5的离线存储功能通过缓存关键资源，使得Web应用程序在网络不可用时仍能提供良好的用户体验。
标签：文件,存储,缓存,浏览器,离线,manifest,简述,html5 From： https://www.cnblogs.com/ai888/p/18666652