HTML5 applications: offline applications and stored applications-H5 Tutorial-php.cn

HTML5 applications: offline applications and stored applications

不言

Release： 2018-08-08 09:53:00

Original

2100 people have browsed it

The content this article brings to you is about HTML5 applications: offline applications and storage applications. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Offline application

Offline application is a new feature in HTML 5, which is designed to help users use web applications even when there is no network. program.
HTML 5 offline functions, including [Offline Resource Cache], [Online Status Monitoring], and [Local Data Storage].

Offline resource caching - cache online resources locally through the browser mechanism. When users access the application offline, these resource files are automatically loaded from the local, so that users can normally Use apps.
Online status monitoring - Some applications need to interact with the server for some data. Application developers need to know whether the browser is online. HTML 5 provides online status monitoring. (window.online = function(){})
Local data storage - When the application is offline, the program needs to store the data generated by the user locally so that it can be used online Sync to the server. For this purpose, HTML 5 provides a variety of local storage mechanisms.

Compared with ordinary web applications, offline web applications have an additional description file to list resources that [need to be cached] and [never cache]. The file extension is [.appcache], and the mime-type of the description file is "text/cache-manifest".

The code of the offline.appcache file is as follows

CACHE MANIFEST
#cache 之后的资源都会被缓存
CACHE:
main.html
style.css
main.js
#network 之后的资源不会被缓存，总是从线上获取
NETWORK:
account/

Copy after login

If you want to offline the application, you only need to associate the .html file with the manifest description file

<html manifest="./offline.appcache"></html>

Copy after login

2.LocalStorage (local storage) and SessionStorage (session storage)

Disadvantages of cookies

Limited size - Under standard browsers, the size of a single cookie is 4kb.
Consumption of performance - all http requests under the current domain will carry these cookie data.

HTML5 local storage allocates space for each website [5MB]

The difference between LocalStorage and SessionStorage
The former will be stored locally until manually cleared;
The latter will survive the life cycle of the current page. Once the page is closed, the stored data will disappear.