Since I was often asked about the contents stored in HTML5 during the interview or written examination before, including their differences, characteristics and application scope, I saw a good introduction article and summarized the contents that the individuals felt fit for me according to my own understanding as follows. For convenience, I forgot to check it later.
Original link:HTML5 5 summary of major storage methods
- The barbaric growth of Cookies
- Localstorage
- Local storage sessionstorage
- Application cache
- Web SQL
- IndexedDB
The barbaric growth of Cookies
InHTML5
Before it appeared,Cookies
It occupies the whole country of client storage, just like the barbaric growth in the barbaric era.cookies
It can meet the needs of practical application very well and quickly. But its problems are also obvious.cookies
The data will be carried on the request header, and the size is limited to 4K, which is very unsafe, easy to be intercepted by the outside, and still exists.domain
Pollution.
IE
Browsers especially like to make their own set, adding to increase storage capacityUserData
, the size is64K
, but other browsers don’t like to play with it, and only its own support.
So, here’s the point. Sincecookies
There are so many problems, we must find ways to solve them, otherwise we cannot continue to develop. First of all, we should confirm what its problems are, and then find solutions according to these problems.
- Solve
4K
Storage capacity problem - To solve the problem that the request header has stored information, that is, to increase security, data storage and transmission are carried out through encrypted channels or methods.
- Solving the Problem of Relational Storage
- Cross browser
Localstorage
Storage method
Stored as a key-value pair, permanently stored and never invalidated unless manually deleted.
Storage capacity
Each domain name5M
.
Common apis
getItem
//Take Records
setItem
//Set Record
removeItem
key
//Takekey
The corresponding value
clear
//Clear Records
Local storage sessionstorage
HTML5
Local storage ofAPI
hit the targetlocalstorage
Andsessionstorage
The use method is the same except thatsessionstorage
After closing the page, it is emptied, andlocalstorage
It will be saved until manually deleted.
Application cache
Locally cache files required by the application
Use method
1. Configurationmanifest
File
On the page:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest
Documents:
manifest
Is the simplest text file that tells the browser what is cached (and what is not cached).
manifest
The document is divided into three parts:
-
CACHE MANIFEST
-Files listed under this heading will be cached after the first download. -
NETWOrK
-Files under this heading need to be connected to the server and will not be cached. -
FALLBACK
-Files under this heading specify a fallback page when the page cannot be accessed (e.g.404
Page)
Completedemo
CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
NETWORK:
login.jsp
FALLBACK:
/html/ /offline.html
On server:manifest
Files need to be configured correctlyMIME-type
, i.e.text/cache-manifest
.
CommonAPI
The core isapplicationCache
Object, there isstatus
Property that represents the current state of the application cache:
0 (UNCACHED)
: No cache, no page-related application cache
1 (IDLE)
: Idle, Application Cache Not Updated
2 (CHECKING)
: checking, downloading description file and checking for updates
3 (DOWNLOADING)
: during download, the application cache is downloading and describing the resources specified in the file
4 (UPDATEREADY)
: update completed, all resources have been downloaded
5 (IDLE)
: Obsolete, the description file of the application cache no longer exists, so the page can no longer access the application cache
Related events
Indicates a change in the application cache state:
checking
: Triggered when the browser looks for updates for the application cache
error
: Triggered when an error occurs during checking for updates or downloading resources
noupdate
: Triggered when checking the description file and finding no change in the file
downloading
: Triggered when downloading application cache resources starts
progress
: Triggered when the file download application cache is continuously downloaded during file download
updateready
: Triggered when the page’s new application cache is downloaded
cached
: Triggered when the application cache is fully available
application cache
Three advantages of:
- Browse offline
- Improve page loading speed
- Reduce server pressure
Note:
- Browsers may have different capacity limits for cached data (some browsers set limits for each site
5M
) - If it is
manifest
The file, or one of the internal listed files, cannot be downloaded normally. The whole update process will be regarded as a failure, and the browser will continue to use the old cache. - Quote
manifest
Thehtml
Must be related tomanifest
The files are homologous and under the same domain. - The browser automatically caches references
manifest
documentaryhtml
File, which leads to if changedhtml
Content, also need to update the version to be up to date -
manifest
In the fileCACHE
AndNETWOrK
、FALLBACK
The position order of the is irrelevant, if it is implicit declaration, it needs to be at the front. -
FALLBACK
Resources in must matchmanifest
File homology - After updating the version, it must be refreshed once before starting the new version (there will be a case of re-brushing the page), and a listening version event needs to be added.
- Even if other pages in the site are not set up
manifest
Property, if the requested resource is also accessed from the cache - When
manifest
When a file changes, the resource request itself also triggers an update
The difference between offline cache and traditional browser cache
- Offline caching is for the entire application and browser caching is a single file
- Offline caching can actively notify browsers to update resources
Web SQL
Web SQL
DatabaseAPI
Not reallyHTML5
Part of the specification, but it is an independent specification that introduces a set of usesSQL
The that operates the client databaseAPIs
.
Core approach
-
openDatabase
: Creates a database object using an existing database or a newly created database -
transaction
: Controls a transaction and performs commit or rollback based on this condition -
executeSql
: Used to perform actualSQL
Query
Open database
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);
Execute query operation
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})
Insert data
Note: Code Block Styles in Blog Topics
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
Note: The code block style to be implemented, this is the operation in markdowpad2, and it is also the operation provided by many markdown writing tools. Just press tab, which is very convenient.
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
Read data
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});
IndexedDB
Index database (IndexedDB
)API
(as)HTML5
Part of) to create a data intensive offline with rich locally stored dataHTML5 Web
The application is very useful, and it also helps to cache data locally, making traditional onlineWeb
Applications (such as mobileWeb
Applications) can run and respond quickly.
AsynchronousAPI
InIndexedDB
Most of the operations are not our usual calling methods (the mode of returning results), but (the request-response mode), such as the operation of opening the database.