Home > Developer > Web Develop
HTML5 so-called offline storage is to save some resource files locally, so that subsequent page reload will use the local resource file, the offline situation can continue to access the Web application, and through a certain way (update related files or use the relevant API), can update, delete offline storage operations;
Here's a simple way to use offline storage:
First: To add the following paragraph to the httpd.conf file of the Apche server
AddType text/cache-manifest. manifest
Second: Build a 1.manifest file, and then here's the clean-up
#下面这句话必须存在, and must be placed on the head
CACHE MANIFEST
#下面这句话指明要缓存的内容
CACHE
#声明用于指定无需缓存的文件
NETWORK
#这个声明允许你在资源不可用的情况下 to redirect a user to a specific file
FALLBACK
CACHE manifestcache:index.html1.cssnetwork:1.jpgfallback:404.html
Third: Add 1.manifest this offline storage manifest file in the HTML tag of index.html
index.html:
<!DOCTYPE HTML><HTMLLang= "en"Manifest= "1.manifest"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> <title>html5 offline storage </title> <Linkrel= "stylesheet"href= "1.css"></Head><Body> <DivID= "box">HTML5 Offline storage</Div> <imgsrc= "1.jpg"alt=""></Body></HTML>
1.CSS:
#box { width:300px; height:200px; Border:2px solid #ddd; background:yellow;}IV: Note that if you do not update 1.manifest This file, then it will download the contents of those files cached before, then if you solve this problem?
just add a # to the 1.manifest file or modify the file to update to the latest file,
Five: If you see whether offline storage is implemented, you can view some information in the console console in Google Chrome developer tools
Document was loaded from application Cache with manifest http://localhost/HTML5/offlineCache/1.manifest localhost/ : 1Application Cache Checking Event Localhost/:1application cache downloading event Localhost/:1application cache Progress Event (0 of 3) http://localhost/HTML5/offlineCache/1.css localhost/:1application Cache Progress Event (1 of 3) HT tp://localhost/html5/offlinecache/index.html localhost/:1application Cache Progress Event (2 of 3) http://localhost/ Html5/offlinecache/localhost/:1application Cache Progress Event (3 of 3)
Sixth: The next can be off the net to test the success of it, you can also stop their servers and then access their own storage page, if the picture is not displayed after offline, and #box style is stored down, then congratulations you have implemented the offline storage function, H5 offline storage also provides some API and JavaScript method, friends can learn to view,
HTML5 Offline Storage Application case
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
