加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 网页制作 > html5

HTML5 本地存储之如果没有数据库究竟会怎样

时间:2013-05-11 10:32:07  来源:互联网  作者:佚名  点击:

点评:本章主要内容是Web Storage与本地数据库,其中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,使用它可以在客户端建立一个数据库大大减轻服务器端的负担,加快访问数据速度前言

本章主要内容是Web Storage与本地数据库,其中Web Storage 是对cookie的优化,本地数据库是HTML5新增的一个功能,使用它可以在客户端建立一个数据库7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

大大减轻服务器端的负担,加快访问数据速度。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

学习本章需要掌握Web Storage基本概念,了解sessionStorage与localStorage的使用与差别7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

掌握本地数据库的使用7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

什么是WebStorage?

前面说过,webstorage是对cookie的优化而来,HTML4中使用cookie在客户端存储用户数据,长期使用发现存在以下问题:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

大小限制在4kbcookie每次随HTTP事务一起发送,浪费带宽正确操作cookie很复杂(这个有待考虑)

由于以上问题,HTML5提出WebStorage作为新的客户端本地保存技术。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Web Storage 技术在web上存储数据即针对客户端本地;具体来说分为两种:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
sessionStrage:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。</p><p>localStorage:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。</p><p>两者区别就是一个作为临时保存,一个拥有长期保存。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
使用示例7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
简单应用7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<html xmlns="http://www.w3.org/1999/xhtml">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<title></title>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Web Storage 实验</h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<div id="msg" style=" margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px; height: 100px;">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</div>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<input type="text" id="text" />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<select id="type">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<option value="session">sessionStorage</option>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<option value="local">localStorage</option>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</select>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button onclick="save();">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
保存数据</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button onclick="load();">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
读取数据</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script type="text/javascript">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var msg = document.getElementById('msg'),7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
text = document.getElementById('text'),7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
type = document.getElementById('type');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function save() {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var str = text.value;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var t = type.value;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
if (t == 'session') {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
sessionStorage.setItem('msg', str);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
} else {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem('msg', str);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function load() {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var t = type.value;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
if (t == 'session') {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
msg.innerHTML = sessionStorage.getItem('msg');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
} else {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
msg.innerHTML = localStorage.getItem('msg');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</script>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</html>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在chrome浏览器下看会有感觉的。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

简单web留言板7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
简单留言板7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<html xmlns="http://www.w3.org/1999/xhtml">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<title></title>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Web Storage 实验</h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
min-height: 100px;">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</div>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<input type="text" id="text" />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button onclick="save();">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
留言</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button onclick="_clear();">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
清空</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script type="text/javascript">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var msg = document.getElementById('msg'),7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
text = document.getElementById('text');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function save() {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var str = text.value;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var k = new Date().getTime();7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.setItem(k, str);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
init();7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function init() {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
msg.innerHTML = '';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var dom = '';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
for (var i = 0, len = localStorage.length; i < len; i++) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
dom += '<div>' + localStorage.key(i) + ':' + localStorage.getItem(localStorage.key(i)) + '</div>'7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
msg.innerHTML = dom;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function _clear() {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
msg.innerHTML = '';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
localStorage.clear();7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</script>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</html>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

更复杂的运用中,可以将value值用作json字符串,以此达到用作数据表的目的;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

本地数据库 7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在HTML5中内置了一个可通过sql访问的数据库(新浏览器果真强大啊!),所以在HTML4中数据只能存在服务器端,HTML5则改变了这一原则。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

这种不需要存储在服务器的专有名词为“SQLLite”(我终于知道他是干什么的了)7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
使用SQLLite数据库,需要两个必要步骤:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
创建数据库访问对象7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
使用事务处理</span></p><div class="cnblogs_code"><pre><span style="COLOR: #000000">创建对象:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
openDatabase(dbName, version, dbDesc, size)</span></pre><pre><span style="COLOR: #000000">实际访问:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
db.transaction(function () {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
  tx.excuteSql('create table ......');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});</span></pre><pre><span style="COLOR: #000000">数据查询:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
excuteSql(sql, [], dataHandler, errorHandler)//后面两个为回调函数;[]估计是做sql注入处理7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

光说不练假把式,我们来实际操作一番,使用数据库实现web通讯录(左思右想还是用上了jQuery):7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

做的时候居然发现我的FF不支持本地数据库!!!以下是用chrome完成的简单的通讯录:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
通讯录7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<!DOCTYPE html >7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<html xmlns="http://www.w3.org/1999/xhtml">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<title></title>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<style>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
span{ cursor: pointer;}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</style>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script src="../jquery-1.7.1.js" type="text/javascript"></script>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script type="text/javascript">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
$(document).ready(function () {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var search = $('#search');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var btSearch = $('#btSearch');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var phoneBook = $('#phoneBook');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var name = $('#name');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var phone = $('#phone');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var add = $('#add');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//开始程序7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var db = openDatabase('phoneBook', '', 'my', 102400);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
init();7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
add.click(function () {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
save(name.val(), phone.val());7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
btSearch.click(function () {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
init(search.val())7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
$('#phoneBook span').click(function () {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
deleteByName($(this).attr('name'));7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
s = '';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//初始化界面7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function init(name) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
db.transaction(function (tx) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
tx.executeSql('create table if not exists phoneBook(name text, phone text)', []);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var sql = 'select * from phoneBook where 1=1';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var param = [];7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
if (name) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
sql += ' and name=? ';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
param.push(name);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
tx.executeSql(sql, param, function (tx, rs) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
phoneBook.html('');7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
for (var i = 0, len = rs.rows.length; i < len; i++) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var data = rs.rows.item(i);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
showData(data);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function showData(data) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var str = '<div>姓名:' + data.name + ';电话:' + data.phone + ' <span onclick="del(/'' + data.name + '/')" >删除</span></div>';7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
phoneBook.append($(str));7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//删除数据7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function deleteByName(name) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
db.transaction(function (tx) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
init();7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
})7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
window.del = deleteByName;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//增加7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function save(name, phone) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
db.transaction(function (tx) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var d = {};7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
d.name = name;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
d.phone = phone;7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
showData(d);7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
})7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
});7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</script>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</head>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
本地数据库实现web通讯录</h1>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<input type="text" id="search" placeholder="联系人姓名" />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button id="btSearch">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
搜索</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<div id="phoneBook">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</div>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<hr />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
姓名:<input type="text" id="name" />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
手机:<input type="text" id="phone" />7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<button id="add">7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
添加到通讯录</button>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</body>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</html>7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

结语 7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

对于搞过后端的同学,这章东西其实也是非常简单的,我再一次涌起了这种想法:7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

其实HTML5就是HTML4+api接口,目的就是让我们可以用js做更多事情罢了。7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

7zB成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门