一、websql 简介

  在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的负担,使Web时代重新回到了“客户端为重,服务器为轻”的时代。
在这其中,一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中,数据库只能放在服务器端,只能通过服务器来访问数据库,但是在HTML5中,可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在,像这种不需要存储在服务器上的,被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用,所以HTML5中也采用了这种数据库来作为本地数据库。
  百度来的,websql已经停止更新了,不过还是可以用用。

二、不BB直接上代码

var wsql_DBName = 'yiliapp'; // 数据库名
var wsql_ver = '1.0'; // 数据库版本
var wsql_description = 'yiliapp数据库'; // 数据库描述
var wsql_dbSize = 3 * 1024 * 1024; // 数据库大小, 其实无所谓,塞多了自己会自动撑大的
var wsql_kv_db = null; // 暂存数据库对象
var wsql_message = "message"; // 数据库中的表单名
var wsql_chat = "chat"; // 数据库中的表单名 /**
* 打开数据库
websqlOpenDB();
websqlOpenDB(true);
* @param {是否重开} isReopen
*/
function websqlOpenDB(isReopen) {
if(!isReopen && wsql_kv_db != null)
return;
// 数据库有就打开 没有就创建
wsql_kv_db = window.openDatabase(wsql_DBName, wsql_ver, wsql_description, wsql_dbSize, function() {});
if(wsql_kv_db) {
// alert("数据库创建/打开成功! ["+ wsql_库名 +"], 容量="+ wsql_dbSize);
websql_CreateMessage(wsql_message);
websql_CreateChat(wsql_chat); } else {
alert("error:数据库创建/打开失败!");
}
return wsql_kv_db;
}
/**
*
* 消息表
*/
function websql_CreateMessage() {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
// sqlite 的 varchar 其实就是 text, 所以干脆统一使用 text字段类型
var creatTableSQL = 'CREATE TABLE IF NOT EXISTS ' + wsql_message + ' (userid text,fid text,nickname text, head text,content text,time text,count INTEGER)';
wsql_kv_db.transaction(function(ctx, result) {
ctx.executeSql(creatTableSQL, [], function(ctx, result) {
// alert("表创建成功 " + wsql_表名);
}, function(tx, error) {
alert('创建表失败:' + wsql_message + "\n" + error.message);
});
});
}
/**
*聊天记录表
*
*/
function websql_CreateChat() {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
// sqlite 的 varchar 其实就是 text, 所以干脆统一使用 text字段类型
var creatTableSQL = 'CREATE TABLE IF NOT EXISTS ' + wsql_chat + ' (userid text,fid text,type text,self INTEGER,content text, time datetime)';
wsql_kv_db.transaction(function(ctx, result) {
ctx.executeSql(creatTableSQL, [], function(ctx, result) {
// alert("表创建成功 " + wsql_表名);
}, function(tx, error) {
alert('创建表失败:' + wsql_chat + "\n" + error.message);
});
});
} /**
* 插入数据到message表
* @param {Object} data
*/
function websql_InsertToMessage(data) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var insertTableSQL = 'INSERT INTO ' + wsql_message + ' (userid,fid,nickname,head,content,time,count) VALUES (?,?,?,?,?,?,?)';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(insertTableSQL, [data.userid, data.fid, data.nickname, data.head, data.content, data.time, data.count], function(ctx, result) {
// console.log("插入" + wsql_表名 + NAME + "成功");
alert("插入" + wsql_message + " 成功");
},
function(tx, error) {
alert('插入失败: ' + error.message);
});
});
} /**
* 插入数据倒chat表
* @param {Object} data
*/
function websql_InsertToChat(data) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var insertTableSQL = 'INSERT INTO ' + wsql_chat + ' (userid,fid,type,self,content,time) VALUES (?,?,?,?,?,?)';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(insertTableSQL, [data.userid, data.fid, data.type, data.self, data.content, data.time], function(ctx, result) {
// console.log("插入" + wsql_表名 + NAME + "成功");
alert("插入" + wsql_chat + " 成功");
},
function(tx, error) {
alert('插入失败: ' + error.message);
});
});
} /**
* 获取message表数据
* @param {用户id} userid
*/
function websql_GetMessageById(userid) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var selectById = 'SELECT * FROM ' + wsql_message + ' WHERE userid = ?';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(selectById, [userid.toString()], function(ctx, result) {
alert('查询成功: ' + wsql_message + result.rows.length);
var len = result.rows.length;
for(var i = 0; i < len; i++) {
console.log(result.rows.item(i));
}
},
function(tx, error) {
alert('查询失败: ' + error.message);
});
});
} /**
* 获取chat表数据
* @param {用户id} userid
* @param {好友id} fid
*/
function websql_GetChatById(userid, fid) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var selectById = 'SELECT * FROM ' + wsql_chat + ' WHERE userid = ? and fid = ? order by time';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(selectById, [userid.toString(), fid.toString()], function(ctx, result) {
alert('查询成功: ' + wsql_message + result.rows.length);
var len = result.rows.length;
for(var i = 0; i < len; i++) {
console.log(result.rows.item(i));
}
},
function(tx, error) {
alert('查询失败: ' + error.message);
});
});
}
/**
* 删除message表数据
* @param {用户id} userid
* @param {好友id} fid
*/
function websql_DeleteMessageByid(userid, fid) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var deleteDataSQL = 'DELETE FROM ' + wsql_message + ' WHERE userid = ? and fid=?';
wsql_kv_db.transaction(function(ctx, result) {
ctx.executeSql(deleteDataSQL, [userid.toString(), fid.toString()], function(ctx, result) {
alert("删除成功 " + wsql_message);
}, function(tx, error) {
alert('删除失败:' + error.message);
});
});
} /**
* 删除message表数据
* @param {用户id} userid
* @param {好友id} fid
*/
function websql_DeleteChatByid(rowid) {
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var deleteDataSQL = 'DELETE FROM ' + wsql_chat + ' WHERE rowid =?';
wsql_kv_db.transaction(function(ctx, result) {
ctx.executeSql(deleteDataSQL, [rowid], function(ctx, result) {
alert("删除成功 " + wsql_chat);
}, function(tx, error) {
alert('删除失败:' + error.message);
});
});
}
/**
* 更新或者创建meessage
* @param {Object} json
* @param {Object} callback
*/
function websql_Message_SetItem(json, callback) {
if(null == wsql_kv_db) {
websqlOpenDB();
}
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
websql_Message_GetItem(json.userid, json.fid, function(res) {
if(res != null) {
var setItemSQL = 'update ' + wsql_message + ' set nickname=? , head=? ,content= ?, time= ?,count=? where userid=? and fid=?';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(setItemSQL, [json.nickname, json.head, json.content, json.time, json.count, json.userid, json.fid], function(ctx, result) {
callback(1)
},
function(tx, error) {
alert('error:更新出错了');
callback(0);
});
});
} else {
websql_InsertToMessage(json);
}
}); } /**
* 获取一条message数据
* 由于 websql 异步,只能用 回调函数
* @param {Object} userid
* @param {Object} fid
* @param {Object} callback
*/
function websql_Message_GetItem(userid, fid, callback) {
if(null == wsql_kv_db) {
websqlOpenDB();
}
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var selectSQL = 'SELECT * FROM ' + wsql_message + ' WHERE userid = ? and fid=?';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(selectSQL, [userid.toString(), fid.toString()], function(ctx, result) {
var len = result.rows.length;
if(len) {
callback(result.rows.item(0));
} else {
callback(null);
}
},
function(tx, error) {
alert('error: websql_Message_getItem: 查询失败:\n' + error.message);
});
}); // alert('here');
} /**
* 更新或者创建Chat
* @param {Object} json
* @param {Object} callback
*/
function websql_Chat_SetItem(json, callback) {
if(null == wsql_kv_db) {
websqlOpenDB();
}
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
websql_Chat_GetItem(json.userid, json.fid, function(res) {
if(res != null) {
var setItemSQL = 'update ' + wsql_chat + ' set content=? ,time=? where userid=? and fid=?';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(setItemSQL, [json.content, json.time, json.userid, json.fid], function(ctx, result) {
callback(1)
},
function(tx, error) {
alert('error:更新出错了' + error.message);
callback(0);
});
});
} else {
websql_InsertToChat(json);
}
}); }
/**
* 获取一条message数据
* 由于 websql 异步,只能用 回调函数
* @param {Object} userid
* @param {Object} fid
* @param {Object} callback
*/
function websql_Chat_GetItem(userid, fid, callback) {
if(null == wsql_kv_db) {
websqlOpenDB();
}
if(wsql_kv_db == null) {
alert('error:数据库未打开');
return;
}
var selectSQL = 'SELECT * FROM ' + wsql_chat + ' WHERE userid = ? and fid=?';
wsql_kv_db.transaction(function(ctx) {
ctx.executeSql(selectSQL, [userid.toString(), fid.toString()], function(ctx, result) {
var len = result.rows.length;
if(len) {
callback(result.rows.item(0));
} else {
callback(null);
}
},
function(tx, error) {
alert('error: 查询失败:\n' + error.message);
});
}); } /**
* //
// alert( ntNow() ); // [2008-01-29 17:15:28.046]
// 2008-01-29
// ntNow()
// ntNow( null, ntStrToDate('2012-01-31') ) // 此相当于 ntDateToStr
// ntNow( 'year' ) // 显示 [2008年1月31日 18:05:07]
// ntNow( 'year,week' ) // 显示 [2008年01月31日 18:05:07 周四]
// 即 function ntNow()
// ntNow('onlyNum') // [20120330235959012] // .substring(8, 15); // 2359590
// ntNow('onlyNum').substring(0,14) // 20110404155603 , 到秒
* @param {Object} flag
* @param {Object} _date
*/
function ntNow(flag, _date) {
var objD = new Date();
if(_date != null)
objD = _date; var dn, s;
var hh = objD.getHours();
var mm = objD.getMinutes();
var ss = objD.getSeconds(); //if(hh>12) { hh = hh-12; dn = '下午'; }
//else dn = '上午'; if(hh < 10) hh = '0' + hh;
if(mm < 10) mm = '0' + mm;
if(ss < 10) ss = '0' + ss; var _yy = objD.getFullYear();
var _m = (objD.getMonth() + 1);
var _mm = (objD.getMonth() + 1);
if(_mm < 10) _mm = '0' + _mm; var _d = (objD.getDate());
var _dd = (objD.getDate());
if(_dd < 10) _dd = '0' + _dd; var _sss = '' + objD.getMilliseconds();
while(_sss.length < 3)
_sss = '0' + _sss; if(flag != null && flag.indexOf('year') >= 0)
s = _yy + "年" + _m + "月" + _d + "日 " +
hh + ":" + mm + ":" + ss;
else if(flag != null && flag.indexOf('onlyNum') >= 0)
s = _yy + "" + _mm + "" + _dd + "" +
hh + "" + mm + "" + ss + "" + _sss;
else
s = _yy + "-" + _mm + "-" + _dd + " " +
hh + ":" + mm + ":" + ss + "." + _sss; if(flag != null && flag.indexOf('week') >= 0) {
// 显示星期
var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
s += ' 周' + nStr1[objD.getDay()];
} return s;
}

htm5本地存储方案——websql的封装的更多相关文章

  1. htm5本地存储方案——indexdb的封装

    不BB直接上代码 /*封装IndexdDB*/ var localDatabase = { }; localDatabase.dbName = "yiliDB"; localDat ...

  2. [转]App离线本地存储方案

    App离线本地存储方案 原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localsto ...

  3. [转]Dcloud App离线本地存储方案

    原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...

  4. Android本地存储方案 SharedPreferences

    原文地址:http://www.yanwushu.com/post/43.html 存储位置 SharedPreferences数据保存在: /data /data/<package_name& ...

  5. JavaScript本地存储实践(html5的localStorage和ie的userData)

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  6. 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

    来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...

  7. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

  8. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  9. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. Linux之find查找命令

    Linux中find常见用法示例 [root@localhost ~]# find  [PATH]  [option]  [action] 参数: 1. 与时间有关的参数:共有-atime.-ctim ...

  2. 使用spring boot访问mongodb数据库

    一. spring boot中传参的方法 1.自动化配置 spring Boot 对于开发人员最大的好处在于可以对 Spring 应用进行自动配置.Spring Boot 会根据应用中声明的第三方依赖 ...

  3. NYOJ 数独 DFS

    数独 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 数独是一种运用纸.笔进行演算的逻辑游戏.玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一 ...

  4. [转载]代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载

    http://devework.com/sublime-text-3.html Sublime Text这款代码编辑器是Jeff 一直都在使用的,前段时间转用到版本3,因为感觉Sublime Text ...

  5. <P>标签小细节

    html标签对大小写不敏感. 注释:浏览器会自动地在段落的前后添加空行.(<p> 是块级元素) 提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯.用 ...

  6. 定价(Price)

    传送门 [题目描述] 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是在心理学上会让人感觉便宜很多 ...

  7. Dream------scala--Tuple、Array、Map与文件操作

    1.Tuple(元组) 一般使用中,假设一个函数返回多个值,我们可以使用tuple接受这个(val (x,y) = myfunction) package com.wls.scala.hello /* ...

  8. flask插件系列之flask_uploads上传文件

    前言 flask可以实现上传文件和下载文件的基本功能,但如果想要健壮的功能,使用flask_uploads插件是十分方便的. 安装 pip install flask_uploads 基本使用 # e ...

  9. PlantUML——4.实例演示1

    给自己发消息 @startuml Alice -> Alice : This is a signal to self.\nIt also demonstrates \nmultiline tex ...

  10. No.5 selenium学习之路之多窗口句柄

    多窗口相关操作 获取当前句柄 c_handle = driver.current_window_handle 获取所有句柄 all_handle = driver.window_handles 切换到 ...