Cookie disadvantage:
①cookie size limit is around 4k, not suitable for storage of business data
②cookie each time it is sent with an HTTP transaction, wasting bandwidth
Localstorage Advantages:
①localstorage Size limited to about 5 million characters, each browser inconsistent
②localstorage not readable in privacy mode
③localstorage essence is in the read and write files, the number of data will compare cards (Firefox will be a one-time import data into memory, think it is scary AH)
④localstorage can not be crawled by crawlers, do not use it to completely replace URL parameters
Use of LocalstorageTo determine browser support:
function supports_html5_storage() { Try{return ' Localstorage ' inchWindow && window[' Localstorage '] !==NULL; }Catch(e) {return false; } or use an open source tool to detect the user's browser's HTML5 support (e.g. Modernizr)if(modernizr.localstorage) {//Window.localstorage is available! }Else{//browser does not support HTML5 storage:( //may consider using Dojox.storage or other methods}Examples of Use
Localstorage.a =3;//Set A to "3"localstorage["a"] ="SFSF";//Set A to "SFSF", overriding the above valueLocalstorage.setitem ("B","Isaac");//Set B to "Isaac"varA1 = localstorage["a"];//Get the value of avarA2 = Localstorage.a;//Get the value of avarb = Localstorage.getitem ("B");//Get the value of BLocalstorage.removeitem ("C");//Clear the value of Cif(localstorage.pagecount) {localstorage.pagecount= Number(Localstorage.pagecount) +1; }Else{localstorage.pagecount=1; }document.write ("Visits"+ Localstorage.pagecount +"Time (s).");</script>Local database support is relatively small, not enough specifications, it is recommended to use less
The local database is the Sqllite database that appears after H5, and you can access the file-type SQL database through the SQL language
To use a database:
Creating Access database Objects
Blog origin
var db= opendatabase (' mydb ', ' 1.0 ', ' TestDB ', 2*1024*1024)
First parameter: Database name
Second parameter: Version number
Third parameter: Database description
Fourth parameter: size of database
The method returns the database Access object after the creation, and if the database does not exist, the database is created
Executing queries with ExecuteSQL
Transaction.executesql (Sqlquery,[],datahandler,errorhandler);
First parameter: query statement
The second parameter: in the query statement?
EG:TRANSACTION.EXECUTESQL ("UPDATE people set age=?") Which name=? ", [Age,name])
Third parameter: callback function to invoke when execution succeeds
function DataHandler (transaction,result) {//callback contents}
Fourth parameter: callback function to invoke when execution fails
Function ErrorHandler (transaction,erromsg) {//alert ("Execution Error! ”)}
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sqlite</title></head><body onload="init ()"> <!--CREATE database objects, use transactions for database operations -Name:<input type="text" id="name"/>Phone:<input type="text" id="Tel" /> <input type="button" value="Save" onclick=" SaveData () " /> <hr/> <input type="button" onclick="ShowAllData ()" Value="Show All"> <input type="button" onclick="Delalldata ()" value= "Clear All"> <hr/> <table id="DataTable" Border="1"> </table> <p id="msg"></P></body><script type="Text/javascript"> varDataTable =NULL;vardb = OpenDatabase (' Mytel ',' 1.0 ',' Test db ',1024x768* -);//Database name version database description size function init(){//initialization workDataTable = document.getElementById (' DataTable '); ShowAllData (); } function removealldata(){//Remove the data displayed on the page for(vari = datatable.childnodes.length-1; i>=0; i--) {datatable.removechild (datatable.childnodes[i]); }varTR = document.createelement (' TR ');varTh1 = Document.createelement (' th ');varTh2 = Document.createelement (' th '); th1.innerhtml =' name '; th2.innerhtml =' phone '; Tr.appendchild (Th1); Tr.appendchild (Th2); Datatable.appendchild (TR); } function showData(Row){//Display data varTR = document.createelement (' TR ');varTD1 = Document.createelement (' TD '); td1.innerhtml = Row.name;varTD2 = Document.createelement (' TD '); td2.innerhtml = Row.tel; Tr.appendchild (TD1); Tr.appendchild (TD2); Datatable.appendchild (TR); } function showalldata(){//Show All dataDb.transaction ( function (TX){Tx.executesql (' CREATE table if not exists teldata (name Text,tel TEXT) ',[], function(tx,res){}, function(tx,err){Alert (Err.message)}); Tx.executesql (' select * from Teldata ',[], function(tx,result){Removealldata (); for(vari =0; i<result.rows.length;i++) {ShowData (Result.rows.item (i)); } }) }) } function saveData(){//Save Data varName = document.getElementById (' name '). Value;varTel = document.getElementById (' Tel '). Value; AddData (Name,tel); ShowAllData (); } function addData(Name,tel){//Add DataDb.transaction ( function(TX){Tx.executesql (' INSERT into teldata values (?,?) ', [Name,tel], function(tx,rs){Alert' yes '); }, function (tx,err){Alert (Err.Source +' = = '+err.message); }) }) } functiondelalldata(){ //Delete all dataDb.transaction ( function(TX){Tx.executesql (' Delete from Teldata ',[], function(tx,res){Alert' Delete Success ~ '); }, function (tx,err){Alert' Delete failed '+err.message); })}) ShowAllData (); }</script></html>Reference
http://blog.csdn.net/sinat_25127047/article/details/51360868
Http://www.cnblogs.com/yexiaochai/p/4509472.html
http://blog.csdn.net/dojotoolkit/article/details/6614883
http://html5doctor.com/introducing-web-sql-databases/
https://dev.w3.org/html5/webdatabase/
http://blog.csdn.net/panda_m/article/details/49951555
Html5-localstorage Local storage and sqllite local database
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
