Comments: This chapter mainly covers Web Storage and local databases, where Web Storage optimizes cookies and local databases is a new function of HTML5, using it, you can create a database on the client, which greatly reduces the burden on the server and speeds up data access.Preface
This chapter mainly covers Web Storage and local databases, where Web Storage optimizes cookies. Local databases are a new function of HTML5. You can use this function to create a database on the client.
This greatly reduces the burden on the server and accelerates data access.
To learn this chapter, you must master the basic concepts of Web Storage and understand the usage and differences between sessionStorage and localStorage.
Master the use of local databases
What is WebStorage?As mentioned above, webstorage is optimized for cookies. In HTML4, cookies are used to store user data on the client. The following problems have been found during long-term use:
The size limit is 4 kbcookie, which is sent along with the HTTP transaction each time. It is complicated to waste bandwidth to operate the cookie correctly (this should be considered)
Due to the above problems, HTML5 proposed WebStorage as a new local storage technology for the client.
The Code is as follows:
The Web Storage technology stores data locally on the web Client. Specifically, it can be divided into two types:
SessionStrage:
Session refers to the period from the time when a user browses a website to the time when the user closes the website, the validity period of the session object is only so long. </P> <p> localStorage:
Save the data on the client hardware device, no matter what it is, that is, the data is still in the next time you open the computer. </P> <p> the difference between the two is temporary storage and long-term storage.
Example
The Code is as follows:
Simple Application
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<H1>
Web Storage experiment <Div id = "msg" style = "margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;">
</Div>
<Input type = "text" id = "text"/>
<Select id = "type">
<Option value = "session"> sessionStorage </option>
<Option value = "local"> localStorage </option>
</Select>
<Button onclick = "save ();">
Save data </button>
<Button onclick = "load ();">
Read data </button>
<Script type = "text/javascript">
Var msg = document. getElementById ('msg '),
Text = document. getElementById ('text '),
Type = document. getElementById ('type ');
Function save (){
Var str = text. value;
Var t = type. value;
If (t = 'session '){
SessionStorage. setItem ('msg ', str );
} Else {
LocalStorage. setItem ('msg ', str );
}
}
Function load (){
Var t = type. value;
If (t = 'session '){
Msg. innerHTML = sessionStorage. getItem ('msg ');
} Else {
Msg. innerHTML = localStorage. getItem ('msg ');
}
}
</Script>
</Body>
</Html>
In the chrome browser, you may feel it.
Simple web message board
The Code is as follows:
Simple message board
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<H1>
Web Storage experiment <Div id = "msg" style = "margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
Min-height: 100px; ">
</Div>
<Input type = "text" id = "text"/>
<Button onclick = "save ();">
Message </button>
<Button onclick = "_ clear ();">
Clear </button>
<Script type = "text/javascript">
Var msg = document. getElementById ('msg '),
Text = document. getElementById ('text ');
Function save (){
Var str = text. value;
Var k = new Date (). getTime ();
LocalStorage. setItem (k, str );
Init ();
}
Function init (){
Msg. innerHTML = '';
Var dom = '';
For (var I = 0, len = localStorage. length; I <len; I ++ ){
Dom + = '<div>' + localStorage. key (I) + ':' + localStorage. getItem (localStorage. key (I) + '</div>'
}
Msg. innerHTML = dom;
}
Function _ clear (){
Msg. innerHTML = '';
LocalStorage. clear ();
}
</Script>
</Body>
</Html>
In more complex use, the value can be used as a json string to serve as a data table;
Local Database
A database that can be accessed through SQL is built in HTML5 (the new browser is really powerful !), Therefore, in HTML4, data can only exist on the server. HTML5 changes this principle.
This exclusive term that does not need to be stored on the server is "SQLLite" (I finally know what he is doing)
The Code is as follows:
Two steps are required to use the SQLLite database:
Create a database access object
Use transaction processing </span> </p> <div class = "cnblogs_code"> <pre> <span style = "COLOR: #000000"> to create an object:
OpenDatabase (dbName, version, dbDesc, size) </span> </pre> <span style = "COLOR: #000000"> actual access:
Db. transaction (function (){
Tx. excuteSql ('create table ......');
}); </Span> </pre> <span style = "COLOR: #000000"> Data Query:
ExcuteSql (SQL, [], dataHandler, errorHandler) // the next two are callback functions. [] it is estimated that SQL injection is performed.
Simply do not practice fake scripts. Let's perform some operations and use the database to implement the web address book (I think jQuery is still used ):
I found that my FF does not support the local database !!! The following is a simple address book completed with chrome:
The Code is as follows:
Address book
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style>
Span {cursor: pointer ;}
</Style>
<Script src = "../jquery-1.7.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var search = $ ('# search ');
Var btSearch = $ ('# btsearch ');
Var phoneBook = $ ('# phoneBook ');
Var name = $ ('# name ');
Var phone = $ ('# phone ');
Var add = $ ('# add ');
// Start the program
Var db = openDatabase ('phonebook', '', 'My, 102400 );
Init ();
Add. click (function (){
Save (name. val (), phone. val ());
});
BtSearch. click (function (){
Init (search. val ())
});
$ ('# PhoneBook span'). click (function (){
DeleteByName ($ (this). attr ('name '));
S = '';
});
// Initialization Interface
Function init (name ){
Db. transaction (function (tx ){
Tx.exe cuteSql ('create table if not exists phoneBook (name text, phone text) ', []);
Var SQL = 'select * from phoneBook where 1 = 1 ';
Var param = [];
If (name ){
SQL + = 'and name =? ';
Param. push (name );
}
Tx.exe cuteSql (SQL, param, function (tx, rs ){
PhoneBook.html ('');
For (var I = 0, len = rs. rows. length; I <len; I ++ ){
Var data = rs. rows. item (I );
ShowData (data );
}
});
});
}
Function showData (data ){
Var str = '<div> name:' + data. name + '; phone:' + data. phone + '<span onclick = "del (\'' + data. name + '\') "> Delete </span> </div> ';
PhoneBook. append ($ (str ));
}
// Delete data
Function deleteByName (name ){
Db. transaction (function (tx ){
Tx.exe cuteSql ('delete from phoneBook where name =? ', [Name], function (tx, rs ){
Init ();
})
});
}
Window. del = deleteByName;
// Add
Function save (name, phone ){
Db. transaction (function (tx ){
Tx.exe cuteSql ('insert into phoneBook values (?, ?) ', [Name, phone], function (tx, rs ){
Var d = {};
D. name = name;
D. phone = phone;
ShowData (d );
})
});
}
});
</Script>
</Head>
<Body>
<H1>
Local Database implementation web address book <Input type = "text" id = "search" placeholder = "contact name"/>
<Button id = "btSearch">
Search </button>
<Div id = "phoneBook">
</Div>
<Hr/>
Name: <input type = "text" id = "name"/>
Mobile phone: <input type = "text" id = "phone"/>
<Button id = "add">
Add to address book </button>
</Body>
</Html>
Conclusion
This chapter is actually very simple for end-users. I once again came up with this idea:
In fact, HTML5 is the HTML4 + api interface, so that we can use js to do more things.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
