search

Home >Web Front-end >H5 Tutorial >Detailed explanation of several examples of html5 storing data on the client

Detailed explanation of several examples of html5 storing data on the client

伊谢尔伦
伊谢尔伦Original
2017-05-30 10:40:482374browse

1.Application Cache

HTML5 introduces application cache, which means that web applications can be cached and can be used even without a network.

The application cache has three characteristics

  • Offline browsing

  • Cached resources Faster loading

  • 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 to the html tag

Each page with a specified manifest will be cached when the user accesses it. 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 - The files listed under this heading require a connection to the server and will not be cached

  • ##FALLBACK - The files listed under this heading require a connection to the page Fallback page when inaccessible (such as 404 page)

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.localStorage & sessionStorage

HTML5 provides two new ways to store data on the client side:

  • localStorage - data storage without time limits

  • 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

Usage: Get the locally stored value of the specified key
Usage: .getItem(key)
Code example:


var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");
removeItemDelete key

Usage: Delete the specified key Locally stored value
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.

3.indexDB

indexDB is a lightweight NOSQL database. It is more efficient than web sql (sqlite), including indexing, transaction processing and robust query functions.

Its features include:

  • A website may have one or more IndexedDB databases, and each database must have a unique name.

  • A database can contain one or more object stores. An object store (uniquely identified by a name) is a collection of records. Each record has a key and a value. The value is an object that can have one or more properties. Keys may be based on a key generator, derived from a key path, or set explicitly. A key generator that automatically generates unique consecutive positive integers. The key path defines the path to the key value. It can be a single JavaScript identifier or multiple identifiers separated by periods. (Somewhat like the characteristics of a column database)

  • In IndexedDB, almost all operations use the command->request->result method. For example, query a record, return a request, and get the query result in the result of the request. Another example is opening a database, returning a request, and getting the returned database reference in the result of the request.

  • indexedDB needs to be placed on the web server before it can run.

The above is the detailed content of Detailed explanation of several examples of html5 storing data on the client. For more information, please follow other related articles on the PHP Chinese website!

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 is the principle of resume transfer? How to use html5 to achieve breakpoint resume upload of filesNext article：What is the principle of resume transfer? How to use html5 to achieve breakpoint resume upload of files

Related articles

See more