Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the methods of offline storage of html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

There are two kinds of html5 offline storage: 1, localstorage (local storage), which is usually used for caching static resources (static pages); 2, Application Cache (application cache), which is usually used for AJAX request caching to store non-critical AJAX data.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Offline storage technology

HTML5 proposed two major offline storage technologies: localstorage and Application Cache, both of which have their own application scenarios, and the traditional offline storage technology is Cookie.

(1) Application Cache (Application caching): commonly used for caching of static resources (static pages).

(2) LocalStorage (local storage): commonly used for AJAX request caching to store non-critical AJAX data.

While cookie can only save a small piece of text (4096 bytes); therefore, it cannot store big data, which is one of the differences between cookie and the above caching technology, and because HTTP is stateless, the server needs an identification string in order to distinguish whether the request comes from the same server, and this task is accomplished by cookie. This piece of text is passed between the server and the browser each time to verify the permissions of the user.

Therefore, the application scenario of Application Cache is different, so its use is not consistent.

What is Application Cache?

HTML5 introduces application caching technology, which means that web applications can be cached and used without a network. By creating cache manifest files, offline applications can be easily created.

The three benefits of Application Cache are:

① offline browsing

② increases page loading speed

③ reduces server pressure

And all the major browsers support Application Cache, so even if they don't support it, it won't affect the program.

What is the application of Application Cache offline storage

Take a plane, the cell phone signal is weak, and you may not have a network when you go to a speech, so offline storage can be used at this time.

Check whether the network is online

Now that we know that Application Cache is used to read files cached on the client when the network is offline, how can we detect whether the network is online?

Detect the network OnLine attributes as follows:

If (navigator.onLine = = true) {alert ("normal Internet access")} else {alert ("unable to connect to the network")} offline storage usage

Browser end

All you need on the browser is a simple setting to include the manifest attribute in the tag of the document

The recommended file extension is .appcache. Visit the files cached locally on the web page for the first time, and next time if there is no network, you will not go to the server. Take this file list.

Server side

Add a properly configured MIME-type, namely "text/cache-manifest", to the server. Must be configured on the web server.

Now the application is not particularly extensive, because most websites have interactive functions, but without interactive functions, the site becomes a pure display, which is of little significance.

Browser-side .appcache file list using detailed CACHE MANIFESTCACHE:# need caching list of files style1.css1.jpg01.js http://localhost/applicationcache/02.jshttp://localhost/applicationcache/zepto.jsNETWORK:# does not need caching 4.jpgFALLBACK:# access cache fails, the first is the access source, the second is the replacement file * .html / offline.html2.jpg/3.jpg

No network post-demonstration diagram:

This is the end of the content of "what are the methods of offline storage of html5". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.