Home >Web Front-end >Front-end Q&A >What are the two storage methods of html5
What are the two storage methods of html5
- 青灯夜游Original
- 2022-01-23 17:36:242377browse
The two storage methods of html5 are: 1. Application cache (application cache), web applications can be cached and can be used even without a network; 2. Local storage (localStorage or sessionStorage), Data can be stored on the client side.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
1.Application Cache
HTML5 introduces application cache, which means that web applications can be cached and can be used even without a network.
Application cache has three characteristics
- Offline browsing
- Cached resources load faster
- Reduce server load, the browser will only download updated or changed resources from the server
The method of use is to add a manifest attribute in the html tag
Each specified manifest The pages will be cached when users visit them. If the manifest attribute is not specified, the page will not be cached (unless it is specified directly in the manifest file).
The recommended file extension for manifest files is: ".appcache".
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
Manifest files are simple text files that tell the browser what is cached (and what is not cached).
Manifest files can be divided into three sections:
- CACHE MANIFEST - files listed under this heading will be cached after the first download
- NETWORK - in The files listed under this heading require a connection to the server and will not be cached
- FALLBACK - The files listed under this heading specify the fallback page (such as a 404 page) when the page cannot be accessed
A complete manifest file
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
2. Local storage
HTML5 provides two new methods for storing data on the client side:
- localStorage - Data storage without time limit
- sessionStorage - Data storage for a session
Before, these were all done by cookies. But cookies are not suitable for storing large amounts of data because they are passed with each request to the server, which makes cookies slow and inefficient.
Both localStorage and sessionStorage have the same operation methods, such as setItem(), getItem() and removeItem(), etc.
Methods of localStorage and sessionStorage:
setItem stores value
Purpose: Store value into the key field
Usage: .setItem(key, value)
Code example:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");getItem gets value
Purpose: Get the value stored locally for the specified key
Usage: .getItem(key)
Code example:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");removeItem delete key
Usage: delete the value stored locally in the specified key
Usage: .removeItem(key)
Code Example:
sessionStorage.removeItem("key");
localStorage.removeItem("site");clear Clear all key/value
Usage: Clear all key/value
Usage: .clear()
sessionStorage is not a persistent storage, and will be cleared after the browser is closed. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
Related recommendations: "html video tutorial"
The above is the detailed content of What are the two storage methods of html5. For more information, please follow other related articles on the PHP Chinese website!