Comments: This article mainly introduces the simple use examples of localstorage, local database, and sessionStorage of html5 local storage. For more information, see
A very cool function of html5 is web storage, which is similar to the previous cookie. However, unlike this, web storage can store 5 MB of local capacity, cookie is only 4 K, which is an incomparable advantage.
Webstrange is divided into localstorage, sessionstorage and local database.
Next I will introduce them one by one:
1. localstorage
Localstorage is easy to use by using the following methods:
The Code is as follows:
LocalStorage. setItem (key, value); // save data
LocalStorage. getItem (key); // read data
LocalStorage. removeItem (key); // delete a single data
LocalStorage. clear (); // delete all data
Key: localStorage. key (index); // obtain the value of an index.
A demo is provided to demonstrate the functions:
The Code is as follows:
(Function ($ ){
$ (Function (){
$. Fn. getFormParam = function (){
Var serializeObj = {};
Var array = this. serializeArray ();
Var str = this. serialize ();
$ (Array). each (function (){
If (serializeObj [this. name]) {
If ($. isArray (serializeObj [this. name]) {
SerializeObj [this. name]. push (this. value );
} Else {
SerializeObj [this. name] = [serializeObj [this. name], this. value];
}
} Else {
SerializeObj [this. name] = this. value;
}
});
Return serializeObj;
};</P> <p> var storageFile = JSON. parse (window. localStorage. getItem ('Demo '));
$. Each (storageFile, function (I, val ){
$ ('# DemoForm'). find ('[name = "' + I + '"]'). val (val );
}); </P> <p> $ ('# demoForm '). find ('[type = "submit"]'). on ('click', function (){
Var data = $ ('# demoForm'). getFormParam ();
Window. localStorage. setItem ('Demo', JSON. stringify (data ));
Return false;
});
});
}) (JQuery)
Html code:
The Code is as follows:
<! Doctype html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Script src = "jquery-1.10.2.min.js"> </script>
<Script src = "demo. js"> </script>
<Title> Document </title>
</Head>
<Body>
<Form id = "demoForm">
<P> <label> <span> name </span> <input name = "name"> </label> </p>
<P> <label> <span> age </span> <input name = "age"> </label> </p>
<P> <label> <span> Student ID </span> <input name = "number"> </label> </p>
<P> <label> <span> address </span> <input name = "address"> </label> </p>
<P> <label> <span> hobbies </span> <input name = "habit"> </label> </p>
<P> <label> <span> others </span> <textarea name = "big" id = "" cols = "30" rows = "10"> </textarea> </label> </p>
<P> <input type = "submit" value = "submit"> </p>
</Form>
</Body>
</Html>
In this way, a simple demo of localstorage is implemented.
2. sessionStorage
SessionStorage is used in the same way as localStorage. However, sessionStorage is cleared when the browser closes the website, while localStorage is always saved in the browser.
3. Local Database
Those familiar with IOS/Android development should be familiar with SQLite databases.
The database operations in html5 are relatively simple, mainly including the openDatabase method and the transaction method.
An object db is used to receive the database access objects created by openDatabase.
The Code is as follows:
Var db = openDatabase (databasename, version, description, size)
Where
Databasename: Database Name
Version: the database version is optional.
Desription: Database description
Size: size of allocated database space
The transaction method uses a callback function as a parameter to execute a specific method for accessing the database in the function.
The Code is as follows:
Db. transaction (function (tx )){
Tx.exe cuteSql (sqlQuery, [value1, value2..], dataHandler, errorHandler)
});
The executeSql method has the following four parameters:
SqlQuery: the SQL statement to be executed. create | select | update | delete;
[Value1, value2...]: an array of all the parameters used in an SQL statement. In the executeSql method, use "?" to specify the parameters used in an SQL statement. Replace, and put these parameters in the second array in sequence;
DataHandler: callback function for successful execution;
ErrorHandler: callback function for execution failure;
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
