Simple usage examples of localstorage, local database and sessionstorage of HTML5 local storage

Time:2022-5-3

A very cool function 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 megabytes, while cookies are only 4K, which is an incomparable advantage.
Web trange is divided into local storage, session storage and local database.

Next, let me introduce them one by one:

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

Copy code

The code is as follows:

localStorage. setItem(key,value);// Save data
localStorage. getItem(key);// Read data
localStorage. removeItem(key);// Delete single data
localStorage. clear();// Delete all data
key:localStorage. key(index);// Get the value of an index

A small demo to show the functions:

Copy code

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:

Copy 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>
<p>< label > < span > name < / span > < input name = “name” > < / label ></p>
<p>< label > < span > age < / span > < input name = “age” > < / label ></p>
<p>< label > < span > student number < / 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” cols = “30” rows = “10” > < / textarea > < / label ></p>
<p>< input type = “submit” value = “submit” ></p>
</form>
</body>
</html>

In this way, a simple demo showing 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, while localstorage will always be saved to the browser. The two can be used together as appropriate.

3. Local database
Students who are familiar with IOS / Android development should be familiar with SQLite database
The database operation in HTML5 is relatively simple, mainly including opendatabase method and transaction method
An object DB is used to receive the object created by opendatabase to access the database

Copy code

The code is as follows:

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

among
Databasename: database name
Version: database version is optional
Description: database description
Size: the size of the database allocated space
 
The transaction method takes a callback function as a parameter and executes the specific method of accessing the database in the function

Copy code

The code is as follows:

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

The four parameters of the executesql method are:

SqlQuery: the SQL statement that needs to be executed, create | select | update | delete;

[value1,value2..]: The array of all parameters used in the SQL statement. In the executesql method, first use “? For the parameters to be used in the SQL statement Replace, and then form an array of these parameters in turn and put them in the second parameter;

Datahandler: execute callback function successfully;

Errorhandler: failed to execute callback function;