如果有一天断网了,如果有一天断电了,如果有一天同时断电又断网了,那么.....???没关系!我有
Html5本地存储技术,我有SQLLite,我可以跟往常一样完成我的业务操作,等什么时候恢复网络,恢复电了,我再把我本地的数据同步到服务器数据库,这是不是件很酷的事情!
使用SQLLite数据库,需要两个必要步骤:
1.创建数据库访问对象
2.使用事务处理
创建对象:
openDatabase(dbName, version, dbDesc, size)
实际访问:
db.transaction(
function () {
tx.
excuteSql('create table ......');
});
数据查询:
excuteSql(sql, [], dataHandler, errorHandler)//后面两个为回调函数;[]估计是做sql注入处理光说不练假把式,我们来实际操作一番,使用数据库实现web通讯录(左思右想还是用上了jQuery):
做的时候居然发现我的FF不支持本地数据库!!!以下是用chrome完成的简单的通讯录:
1 <!DOCTYPE html >
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style>
6 span{ cursor: pointer;}
7 </style>
8 <script src="../jquery-1.7.1.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 $(document).ready(function () {
11 var search = $('#search');
12 var btSearch = $('#btSearch');
13
14 var phoneBook = $('#phoneBook');
15 var name = $('#name');
16 var phone = $('#phone');
17 var add = $('#add');
18
19 //开始程序
20 var db = openDatabase('phoneBook', '', 'my', 102400);
21
22 init();
23
24 add.click(function () {
25 save(name.val(), phone.val());
26 });
27 btSearch.click(function () {
28 init(search.val())
29 });
30 $('#phoneBook span').click(function () {
31 deleteByName($(this).attr('name'));
32 s = '';
33 });
34
35
36 //初始化界面
37 function init(name) {
38 db.transaction(function (tx) {
39 tx.executeSql('create table if not exists phoneBook(name text, phone text)', []);
40 var sql = 'select * from phoneBook where 1=1';
41 var param = [];
42 if (name) {
43 sql = ' and name=? ';
44 param.push(name);
45 }
46 tx.executeSql(sql, param, function (tx, rs) {
47 phoneBook.html('');
48 for (var i = 0, len = rs.rows.length; i < len; i ) {
49 var data = rs.rows.item(i);
50 showData(data);
51 }
52 });
53 });
54 }
55
56 function showData(data) {
57 var str = '<div>姓名:' data.name ';电话:' data.phone ' <span onclick="del(\'' data.name '\')" >删除</span></div>';
58 phoneBook.append($(str));
59 }
60
61 //删除数据
62 function deleteByName(name) {
63 db.transaction(function (tx) {
64 tx.executeSql('delete from phoneBook where name=?', [name], function (tx, rs) {
65 init();
66 })
67 });
68 }
69 window.del = deleteByName;
70 //增加
71 function save(name, phone) {
72 db.transaction(function (tx) {
73 tx.executeSql('insert into phoneBook values(?, ?)', [name, phone], function (tx, rs) {
74 var d = {};
75 d.name = name;
76 d.phone = phone;
77 showData(d);
78 })
79 });
80 }
81
82 });
83
84 </script>
85 </head>
86 <body>
87 <h1>
88 本地数据库实现web通讯录</h1>
89 <input type="text" id="search" placeholder="联系人姓名" />
90 <button id="btSearch">
91 搜索</button>
92
93 <div id="phoneBook">
94 </div>
95 <hr />
96 姓名:<input type="text" id="name" /><br />
97 手机:<input type="text" id="phone" /><br />
98 <button id="add">
99 添加到通讯录</button>
100 </body>
101 </html>
![](http://www.mk2048.com/web_upload/blog_imgs/4/www-dalbll-com_Upload_Blog_egaabaqo.jpg)