HTML5 本地存储之如果没有数据库究竟会怎样
做的时候居然发现我的FF不支持本地数据库！！！以下是用chrome完成的简单的通讯录：
复制代码代码如下:
通讯录
<!DOCTYPE html >
<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; i < len; i++) {
var data = rs.rows.item(i);
showData(data);
}
});
});
}
function showData(data) {
var str = ''<div>姓名：'' + 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;