HTML 5 web storage
HTML 5's web storage is different from cookie storage, and its storage efficiency is better. Its data can only be accessed by the web page, and the client stores two types of data.
- Local Storage: Storage without time limit;
- Session Storage: Storage for a session.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datalist</title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
if (typeof(Storage)!=="undefined") {
localStorage.myName="Military leader famed for combat against Japanese pirate invaders"
document.getElementById("result").innerHTML=localStorage.myName + "Anti-Japanese Famous General";
} else {
document.getElementById("result").innerHTML="Browser does not support storage";
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datalist</title>
<script type="text/javascript">
function clickCount() {
if (typeof(Storage)!=="undefined") {
if (sessionStorage.count) {
sessionStorage.count=Number(sessionStorage.count)+1;
}else{
sessionStorage.count=1;
}
document.getElementById("result").innerHTML="You've ordered it." + sessionStorage.count + "second";
}else{
document.getElementById("result").innerHTML="Browser does not support Storage";
}
}
</script>
</head>
<body>
<button onclick="clickCount()" type="button">up up</button>
<div id="result"></div>
</body>
</html>localStorage object
- There is no time limit for this object to store data.
- This kind of data storage is in the form of key-value. In the example above, key= "myName", value= "Qi Jiguang";
- Its corresponding operations are as follows
- Storage, localStorage.myName= "Qi Jiguang";
- Find, direct reference: var name = localStorage.myName;
- Remove, localStorage.removeItem(key);
Session Storage object
- The session Storage method stores data for a session. When the user closes the browser window, the data is deleted.
Common APIs for local Storage and session Storage
- In the case of localStorage, session Storage has the same usage meaning.
- Save data, localStorage.setItem(key, value);
- Read the data, localStorage.getItem(key);
- Delete individual data, localStorage.removeItem(key);
- Delete all data, localStorage.clear();
- Get the key of an index, localStorage.key(index);
demo of Local Storage and Session Storage
html5 web sql
web sql database api is not part of HTML 5 specification, but it is an independent specification, introducing a set of apis using sql to operate client database.
Core approach
- openDatabase: Create a database object using an existing database or a new database.
- Transaction: enables us to control a transaction and perform commits or rollbacks based on this situation;
- executeSql: Used to execute actual sql statements.
Open the database
- Open a database with openDatabase(), if there is a direct open, if there is no new database;
- var db=openDatabase('mydb', '1.0', 'test db', 2*1024*1024);
- Parameter 1, database name;
- Parametric 2, version number;
- Parameter 3, database description text;
- Parameter 4, database size;
- Parameter 5, create callbacks.
- Parameter 5, the creation callback is called after the creation of the database.
Perform query operations
//The following statement creates a table named PERSON in the'mydb'database.
var db = openDatabase('mydb', '1.0', 'test DB', 2*1024*1024);
db.transaction(function (tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS PERSON(id unique, name)');
});insert data
db.transaction(function (tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS PERSON(id unique, name)');
tx.executeSql('INSERT INTO PERSON(id, name) VALUES(1, "Military leader famed for combat against Japanese pirate invaders")');
tx.executeSql('INSERT INTO PERSON(id, name) VALUES(2, "Zhao Zilong")');
});Delete records
db.transaction(function (tx){
tx.executeSql('DELETE FROM　PERSON WHERE id=1');
});
//Deleting the specified data id can also be dynamic
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);Update records
db.transaction(function (tx) {
tx.executeSql('UPDATE PERSON SET name=\'Mrs. Qi Jiguang\' WHERE id=1');
});
//Updating the specified data id can also be dynamic
tx.executeSql('UPDATE PERSON SET name=\'Mrs. Qi Jiguang\' WHERE id=?', [id]);Read data
db.transaction(function (tx){
tx.executeSql('SELECT * FROM PERSON', [], function(tx, results){
var len = results.rows.length, i;
msg = "<p>Number of query records:" + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for(int i=0; i<len; i++){
alert(results.rows.item(i).name);
}
}, null);
});html5 web workers
- Similar to background scripts?
- web worker is JavaScript running in the background, which does not affect the performance of the page.
- When a script is executed in an HTML page, the state of the page is unresponsive until the script is complete.
Web worker is JavaScript running in the background, independent of other scripts, and does not affect the performance of the page. You can continue to do whatever you want: click, select content, and so on, while the web worker runs in the background.
HTML 5 application cache
- HTML5 introduces application caching, which means that web applications can be cached and accessed without an Internet connection.
- Application caching brings three advantages to applications.
- 1. Offline browsing - Users can use them when applying offline
- 2. Speed - Cached resources load faster
- 3. Reduce server load - Browsers will only download updated or changed resources from servers.