HTML5 local storage localstorage, local database, sessionStorage simple usage examples

Home

Web Front-end

H5 Tutorial

HTML5 local storage localstorage, local database, sessionStorage simple usage examples_html5 tutorial skills

PHP中文网

May 16, 2016 pm 03:47 PM

A very cool feature of HTML5 is web storage, which is similar to the previous cookies, but the difference is that web storage has a local capacity of 5 MB to store, while cookies are only 4K, which is completely incomparable. advantages.
Webstrange is divided into: localstorage, sessionstorage and local database.

Next I will introduce them one by one:

1. localstorage
The use of localstorage is relatively simple. The methods are:

The code is as follows :

localStorage.setItem(key,value);//保存数据
localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
key：localStorage.key(index);//得到某个索引的值

Copy after login

A small demo to show the function:

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(&#39;demo&#39;));
$.each(storageFile, function(i, val){
$(&#39;#demoForm&#39;).find(&#39;[name="&#39;+i+&#39;"]&#39;).val(val);
});</p> <p> $(&#39;#demoForm&#39;).find(&#39;[type="submit"]&#39;).on(&#39;click&#39;, function(){
var data = $(&#39;#demoForm&#39;).getFormParam();
window.localStorage.setItem(&#39;demo&#39;, JSON.stringify(data));
return false;
});
});
})(jQuery)

Copy after login

html code:

<!doctype html>
<html>
<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>姓名</span><input name="name"></label></p>
<p><label><span>年龄</span><input name="age"></label></p>
<p><label><span>学号</span><input name="number"></label></p>
<p><label><span>地址</span><input name="address"></label></p>
<p><label><span>爱好</span><input name="habit"></label></p>
<p><label><span>其他</span><textarea name="big" id="" cols="30" rows="10"></textarea></label></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>

Copy after login

In this way, a simple demo showing localstorage is realized

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 always be saved to the browser, and the two can be used together as appropriate.

3. Local database
Students who are familiar with IOS/Android development should be 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 the object created by openDatabase to access the database

var db = openDatabase(databasename,version,description,size)

Copy after login

where
databasename: database name
version: database version is optional
desription: database description
size : Database allocation space size

The transaction method uses a callback function as a parameter, and executes a specific method of accessing the database in the function

db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});

Copy after login

The four parameters of the executeSql method are:

sqlQuery: the sql statement that needs to be executed specifically, create||select||update||delete;

[value1, value2..]: the array of all parameters used in the sql statement, in In the executeSql method, first replace the parameters to be used in the sql statement with "?", and then put these parameters into an array in sequence and put them in the second parameter;

dataHandler: execution success callback function;

errorHandler: execution failure callback function;

The above is the content of simple usage examples of localstorage, local database and sessionStorage of html5 local storage_html5 tutorial skills. For more related content, please pay attention to the PHP Chinese website (www. php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn