快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

菲律宾葡京娱乐场_龟发之家论坛



媒介

本章主要内容是Web Storage与本地数据库,此中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,应用它可以在客户端建立一个数据库

大年夜大年夜减轻办事菲律宾葡京娱乐场器真个包袱,加快造访数据速率。

进修本章必要掌握Web Storage基础观点,懂得sessionStorage与localStorage的应用与区别

掌握本地数据库的应用

什么是WebStorage?

前面说过,webstorage是对cookie的优化而来,HTML4中应用cookie在客户端存储用户数据,经久应用发明存在以下问题:

大年夜小限定在4kb

cookie每次随HTTP事务一路发送,挥霍带宽

精确操作cookie很繁杂(这个有待斟酌)

因为以上问题,HTML5提出WebStorage作为新的客户端本地保存技巧。

Web Storage 技巧在web上存储数据即针对客户端本地;详细来说分为两种:

sessionStrage:

session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个光阴段,session工具的有效期就只有这么长。

localStorage:

将数据保存在客户端硬件设备上,不管它是什么,意思便是下次打开谋略机时刻数据还在。

两者差别便是一个作为临时保存,一个拥有经久菲律宾葡京娱乐场保存。

应用示例

简单利用

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

head>body>

h1>Web Storage 实验h1>

div id="msg" style=" margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;">div>

input type="text" id="text" />select i菲律宾葡京娱乐场d="type">

option value="session">sessionStorageoption>option value="local">localStorageoption>

select>button onclick="save();">

保存数据button>button onclick="load();">

读取数据button>script type="text/javascript">

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.innerHTML = sessionStorage.getItem('msg');

} else {msg.innerHTML = localStorage.getItem('msg');

}}

script>

body>html>

在chrome浏览器下看会有感到的。

简单web留言板

简单留言板

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

head>body>

h1>Web Storage 实验h1>

div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;min-height: 100px;">

div>input type="text" id="text" />

button onclick="save();">留言button>

button onclick="_clear();">清空button>

script type="text/javascript">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.innerHTML = '';var dom = '';

for (var i = 0, len = localStorage.length; ilen; i++) {dom += 'div>' + localStorage.key(i) + ':' + localStorage.getItem(localStorage.key(i)) + 'div>'

}msg.innerHTML = dom;

}

function _clear() {msg.innerHTML = '';

localStorage.clear();}

script>

body>html>

更繁杂的运用中,可以将value值用作json字符串,以此达到用作数据表的目的;

本地数据库

在HTML5中内置了一个可经由过程sql造访的数据库(新浏览器果然强大年夜啊!),以是在HTML4中数据只能存在办事器端,HTML5则改变了这一原则。

这种不必要存储在办事器的专着名词为“SQLLite”(我终于知道他是干什么的了)

应用SQLLite数据库,必要两个需要步骤:

创建数据库造访工具

应用事务处置惩罚

创建工具:

openDatabase(dbName, version, dbDesc, size)

实际造访:

db.transaction(function () {

tx.excuteSql('create table ......');

});

数据查询:

excuteSql(sql, [], dataHandler, errorHandler)//后面两个为回调函数;[]预计是做sql注入处置惩罚

光说不练假把式,我们来实际操作一番,应用数据库实现web通讯录(左思右想照样用上了jQuery):

做的时刻居然发明我的FF不支持本地数据库!!!以下是用chrome完成的简单的通讯录:

通讯录

>html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style>span{ cursor: pointer;}

style>script src="../jquery-1.7.1.js" type="text/javascript">script>

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; ilen; i++) {

var data = rs.rows.item(i);showData(data);

}});

});}

function showData(data) {

var str = '

姓名:' + data.name + ';电话:' + data.phone + ' span onclick="del(\'' + data.name + '\')" >删除span>div>';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>本地数据库实现web通讯录h1>

input type="text" id="search" placeholder="联系人姓名" />button id="btSearch">

搜索button>

div id="phoneBook">div>

hr />姓名:input type="text" id="name" />br />

手机:input type="text" id="phone" />br />button id="add">

添加到通讯录button>body>

html>

结语

对付搞过后真个同砚,这章器械着实也是异常简单的,我再一次涌起了这种设法主见:

着实HTML5便是HTML4+api接口,目的便是让我们可以用js做更多工作罢了。

您可能还会对下面的文章感兴趣: