Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about the use of WebStorage in HTML5 local storage and how the experiment is. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Preface

The main content of this chapter is Web Storage and local database, in which Web Storage is the optimization of cookie, and local database is a new function of HTML5, which can be used to establish a database on the client side.

It greatly reduces the burden on the server and speeds up the speed of accessing data.

To learn this chapter, you need to master the basic concepts of Web Storage and understand the use and difference between sessionStorage and localStorage.

Master the use of local database

What is WebStorage?

As mentioned earlier, webstorage is the optimization of cookie. Cookie is used in HTML4 to store user data on the client side. The following problems have been found in long-term use:

The size is limited to the fact that 4kbcookie is sent with each HTTP transaction, wasting bandwidth and operating cookie correctly is complex (this needs to be considered)

Because of the above problems, HTML5 proposes WebStorage as a new client-side local preservation technology.

The code is as follows:

Web Storage technology stores data on web, that is, it is local to the client. Specifically, there are two types:

SessionStrage:

Session means conversation. Session here means that when a user visits a website, the validity period of the session object is only so long during the period from entering the site to closing the site.

LocalStorage:

Save the data on the client hardware device, whatever it is, which means that the data will still be there the next time you turn on the computer.

The difference between the two is that one is kept temporarily and the other has long-term preservation.

Use the example

The code is as follows:

Simple application

Web Storage experiment

SessionStorage

LocalStorage

Read data

Var msg = document.getElementById ('msg')

Text = document.getElementById ('text')

Type = document.getElementById ('type')

Function save () {

Var str = text.value

Var t = type.value

If (t = = 'session') {

SessionStorage.setItem ('msg', str)

} else {

LocalStorage.setItem ('msg', str)

}

}

Function load () {

Var t = type.value

If (t = = 'session') {

MSG [XSS _ clean] = sessionStorage.getItem ('msg')

} else {

MSG [XSS _ clean] = localStorage.getItem ('msg')

}

}

You can feel it when you read it in a chrome browser.

Simple web message board

The code is as follows:

Simple message board

Web Storage experiment

Empty

Var msg = document.getElementById ('msg')

Text = document.getElementById ('text')

Function save () {

Var str = text.value

Var k = new Date () .getTime ()

LocalStorage.setItem (k, str)

Init ()

}

Function init () {

MSG [XSS _ clean] =''

Var dom =''

For (var I = 0, len = localStorage.length; I < len; iTunes +) {

Dom + =''+ localStorage.key (I) +':'+ localStorage.getItem (localStorage.key (I)) +''

}

MSG [XSS _ clean] = dom

}

Function _ clear () {

MSG [XSS _ clean] =''

LocalStorage.clear ()

}

In more complex applications, the value value can be used as a json string for the purpose of using a data table

Local database

There is a database built into HTML5 that can be accessed through sql (the new browser is really powerful! So data can only exist on the server side in HTML4, and HTML5 has changed this principle

The proper noun that doesn't need to be stored on the server is "SQLLite" (I finally know what he does).

The code is as follows:

Using the SQLLite database requires two necessary steps:

Create a database access object

Use transaction processing

Create an object:

OpenDatabase (dbName, version, dbDesc, size) actual access:

Db.transaction (function () {

Tx.excuteSql ('create table.')

}); data query:

ExcuteSql (sql, [], dataHandler, errorHandler) / / the last two are callback functions; [] is estimated to do sql injection processing.

Instead of practicing fake tricks, let's actually use the database to implement the web address book (think about it or use jQuery):

When doing it, I found that my FF does not support the local database! Here is a simple address book done in chrome:

The code is as follows:

Address book

Span {cursor: pointer;}

$(document) .ready (function () {

Var search = $('# search')

Var btSearch = $('# btSearch')

Var phoneBook = $('# phoneBook')

Var name = $('# name')

Var phone = $('# phone')

Var add = $('# add')

/ / start the program

Var db = openDatabase ('phoneBook',', 'my', 102400)

Init ()

Add.click (function () {

Save (name.val (), phone.val ())

});

BtSearch.click (function () {

Init (search.val ())

});

$('# phoneBook span') .click (function () {

DeleteByName ($(this) .attr ('name'))

S =''

});

/ / initialization interface

Function init (name) {

Db.transaction (function (tx) {

Tx.executeSql ('create table if not exists phoneBook (name text, phone text)', [])

Var sql = 'select * from phoneBook where 1'

Var param = []

If (name) {

Sql + = 'and name=?'

Param.push (name)

}

Tx.executeSql (sql, param, function (tx, rs) {

PhoneBook.html ('')

For (var I = 0, len = rs.rows.length; I < len; iTunes +) {

Var data = rs.rows.item (I)

ShowData (data)

}

});

});

}

Function showData (data) {

Var str = 'name:' + data.name +'; Tel:'+ data.phone +'

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.