preface

due to the above questions, HTML5 WebStorage as new client local preservation technology is put forward.

  code is as follows:  


Web Storage technology to store data on the Web that is for the client local; Specifically can be divided into two kinds:
sessionStrage:
the session or sessions, the session here refers to the user to browse a web site, from access to the site to shut a website this time, the session object is valid only so long. </p><P> LocalStorage:
to save the data on the client hardware equipment, no matter what it is, which means that the next open computer data. </p><P> The difference is that as a temporary storage, with a long-term preservation.

use the sample

code is as follows:


simple application <! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
</head>
<Body>
<H1 >
Web Storage experiment </h1 >
<Div id="MSG" style="margin: 0 px; border: 1 px solid black; padding: 10 px; width: 300 px, height: 100 px;" >
</div>
<Input type="text" id="text"/>
<Select id="type" >
<The option value="http://www.script-home.com//html5/session" >SessionStorage
<The option value="http://www.script-home.com//html5/local" >LocalStorage
</select>
<Button>
save data </button>
<Button>
read data </button>
<The script type="text/javascript" >
var MSG=document. GetElementById (" MSG "),
text=document. The getElementById () 'text',
type=document. The getElementById (" type ");

the function the save () {
var STR=text. The value;
var t=the value;
the if (t=='session') {
sessionStorage. SetItem (" MSG ", STR);
} else {
localStorage. SetItem (" MSG ", STR);

}}

the function the load () {
var t=the value;
the if (t=='session') {
MSG. The innerHTML=sessionStorage. The getItem (" MSG ");
} else {
MSG. The innerHTML=localStorage. The getItem (" MSG ");

}}

</script>
</body>
</html>

code is as follows:


simple message boards <! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
</head>
<Body>
<H1 >
Web Storage experiment </h1 >
<Div id="MSG" style="margin: 0 px; border: 1 px solid black; padding: 10 px; width: 300 px.
min - height: 100 px;" >
</div>
<Input type="text" id="text"/>
<Button>
the message </button>
<Button>
empty </button>
<The script type="text/javascript" >
var MSG=document. GetElementById (" MSG "),
text=document. The getElementById (" text ");

the function the save () {
var STR=text. The value;
var k=new Date (). The getTime ();
localStorage. SetItem (k, STR);
init ();
}

the function the init () {
MSG. The innerHTML=' ';
var dom=' ';
the for (var I=0, len=localStorage. Length; I <len; i++) {dom +='
<Div> '+ localStorage. Key (I) +', '+ localStorage. The getItem (localStorage. Key (I)) +' </div> '
}
MSG. The innerHTML=dom;
}

function _clear () {
MSG. The innerHTML=' ';
localStorage. The clear ();
}

</script>
</body>
</html>

code is as follows:


use SQLLite databases, requires two necessary steps:

create database access object using the transaction </span> </p><Div class="cnblogs_code >"<Pre> <Span style="COLOR: # 000000" >Create objects:
the openDatabase (dbName, version, dbDesc, size) </span> </pre><Pre> <Span style="COLOR: # 000000" >Actual visit:
db. The transaction (the function () {
tx. ExcuteSql (' the create table... '),
}); </span> </pre><Pre> <Span style="COLOR: # 000000" >Data query:
excuteSql (SQL, [], the dataHandler, errorHandler)//behind two as the callback function; [] estimate is to do SQL injection processing

all talk accusers, we come to the actual operation, using the database implementing web directories (think or use of the jQuery) :
code is as follows:


directories <! DOCTYPE HTML >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
<STYLE>
span {cursor: pointer; }
</style>
<Script SRC="http://www.script-home.com//jquery-1.7.1.js" type="text/javascript" ></script>
<The script type="text/javascript" >
$(document).ready(function () {
var search=$('#search');
var btSearch=$('#btSearch');

var phoneBook=$('#phoneBook');
var name=$('#name');
var phone=$('#phone');
var add=$('#add');

//开始程序
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='';
});

//初始化界面
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=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 var data=http://www.script-home.com//html5/rs.rows.item(i);
showData(data);
}
});
});
}

function showData(data) {
var str='

姓名:' + data.name + ';电话:' + data.phone + ' 删除

';
phoneBook.append($(str));
}

//删除数据
function deleteByName(name) {
db.transaction(function (tx) {
tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {
init();
})
});
}
window.del=deleteByName;
//增加
function save(name, phone) {
db.transaction(function (tx) {
tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {
var d={};
d.name=name;
d.phone=phone;
showData(d);
})
});
}

});

</script>
</head>
<Body>
<H1 >
the local database to realize the web contact list </h1 >
<Input type="text" id="search" placeholder="contact name"/>
<The button id="btSearch >"
search </button>

<Div id="phoneBook" >
</div>
<Hr/>
name: <Input type="text" id="name"/>
mobile: <Input type="text" id="phone"/>
<The button id="add" >
add to address book </button>
</body>
</html>
# 0 - #


This concludes the body part