search

Home  >  Article  >  Web Front-end  >  What are the two storage methods of html5

What are the two storage methods of html5

青灯夜游
青灯夜游Original
2022-01-23 17:36:242340browse

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.

What are the two storage methods of html5

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!

html5 html Cookie Session
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What does html5 line spacing mean?Next article：What does html5 line spacing mean?

Related articles

See more