Comment: This article mainly introduces the simple use examples of localstorage, local database, and sessionStorage in html5 local storage. Friends who need it can refer to it.
A very cool feature of html5 is web storage, similar to previous cookies, but the difference is that web storage has a local capacity of 5 megabytes to store, while cookies only have 4K, which is an advantage that cannot be compared.
Webstrange is further divided into: localstorage, sessionstorage and local database.
Next I will introduce it one by one:
1. localstorage
The use of localstorage is relatively simple, and the methods are:
localStorage.setItem(key,value);//Save data
localStorage.getItem(key);//Read data
localStorage.removeItem(key);//Delete individual data
localStorage.clear();//Delete all data
key: localStorage.key(index);//Get the value of a certain index
A small demo to show the function:
(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:
<!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>
<p><label><span>Name</span><input></label></p>
<p><label><span>Age</span><input></label></p>
<p><label><span>Student number</span><input></label></p>
<p><label><span>Address</span><input></label></p>
<p><label><span>Hobbies</span><input></label></p>
<p><label><span>Other</span><textarea cols="30" rows="10"></textarea></label></p>
<p><input type="submit" value="submit"></p>
</form>
</body>
</html>
In this way, a simple demo that shows localstorage is implemented
2. sessionStorage
The usage of sessionStorage is the same as that of localStorage, but sessionStorage will be cleared when the browser closes the website, and localStorage will be saved to the browser, and both will be used together as appropriate.
3. Local database
Students who are familiar with IOS/Android development should be more familiar with SQLite databases
The operation of the database in html5 is relatively simple, mainly including the openDatabase method and the transaction method
Use an object db to receive objects created by openDatabase to access the database
var db = openDatabase(databasename,version, description, size)
in
databasename: database name
Version: The database version can be ignored
Description: Database description
size: the database allocated space size
The transaction method uses a callback function as a parameter to execute a specific method to access the database in the function.
db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,ErrorHandler)
});
The four parameters of the executeSql method are:
sqlQuery: SQL statements that need to be executed specifically, create||select||update||delete;
[value1,value2..]: An array of all parameters used in the sql statement. In the executeSql method, the parameters to be used in the sql statement are replaced first with ?, and then these parameters are composed of an array in turn and placed in the second parameter;
dataHandler: execute successful callback function;
errorHandler: The callback function failed to execute;