phonegap 官方的存储文档说明
http://docs.phonegap.com/en/2.9.0/cordova_storage_storage.md.html#Storage
这几天(注意发布时间)，公司需要简单写个记事本工具，支持文本和图片（将图片以base64形式插入到可编辑的iframe页面中），需要支持离线，即用户可以将数据保存到本地，有登录的情况下，点同步可以将数据同步到服务器，同时将服务端的数据更新到下面。
考虑了几个数据存储的方式。
1.cookie 咔嚓不适合
2.locationStorage 支持的数据不大，约5m~15M左右，因为图片数据的关系，所以不够。当然，原来居然考虑过，保存文件路径，再单独写个函数将图片放到系统里，后面想想太麻烦了。。。哈哈。。。.但是只能当成一个比较大的数组来使用，查询检索相关不方便，排序什么的就还是按照原来数据的操作方式，节点数和容量都有相当限制，而且需要注意安全。不小心清除了就扑街了。
2.1 一个在线识别浏览器locationStorage容量脚本
https://arty.name/localstorage.html
3.webSql 适合本地使用，虽然这个东西的情况有点尴尬，一个是，基本上主流的新的浏览器都支持了它，问题是这个标准现在又是放弃的阶段。。哈哈。。不过已经有了，就拿来先用，同时支持模糊搜索，增删改查，所以也方便了很多。主要一个优势是，用这种方式开发，完全可以在浏览器端开发完，最后再直接复制到phonegap里进行打包。所以开发上相对来说方便很多。不过大文件的情况下，还是需要考虑和服务器端一样，文件放本地，然后只保存文件路径到数据里。
(附带一个封装好的sqlite.js，在文章底部)
Sqlite.js来源
http://www.oschina.net/code/snippet_202842_10588
//copyright by lanxyou lanxyou[at]gmail.com
var lanxDB=function(dbname){
var db=openDatabase(dbname,'1.0.0','',65536);
return{
//返回数据库名
getDBName:function(){
return dbname;
},
//初始化数据库，如果需要则创建表
init:function(tableName,colums){
this.switchTable(tableName);
colums.length>0?this.createTable(colums):'';
return this;
},
//创建表，colums:[name:字段名,type:字段类型]
createTable:function(colums){
var sql="CREATE TABLE IF NOT EXISTS " + this._table ;
var t;
if (colums instanceof Array && colums.length>0){
t=[];
for (var i in colums){
t.push(colums[i].name+' '+colums[i].type);
}
t=t.join(', ');
}else if(typeof colums=="object"){
t+=colums.name+' '+colums.type;
}
sql=sql+" ("+t+")";
var that=this;
db.transaction(function (t) {
t.executeSql(sql) ;
})
},
//切换表
switchTable:function(tableName){
this._table=tableName;
return this;
},
//插入数据并执行回调函数，支持批量插入
//data为Array类型，每一组值均为Object类型，每一个Obejct的属性应为表的字段名，对应要保存的值
insertData:function(data,callback){
var that=this;
var sql="INSERT INTO "+this._table;
if (data instanceof Array && data.length>0){
var cols=[],qs=[];
for (var i in data[0]){
cols.push(i);
qs.push('?');
}
sql+=" ("+cols.join(',')+") Values ("+qs.join(',')+")";
}else{
return false;
}
var p=[],
d=data,
pLenth=0,
r=[];
for (var i=0,dLength=d.length;i<dLength;i++){
var k=[];
for (var j in d[i]){
k.push(d[i][j]);
}
p.push(k);
}
var queue=function(b,result){
if (result){
r.push(result.insertId ||result.rowsAffected);
}
if (p.length>0){
db.transaction(function (t) {
t.executeSql(sql,p.shift(),queue,that.onfail);
})
}else{
if (callback){
callback.call(this,r);
}
}
}
queue();
},
_where:'',
//where语句，支持自写和以对象属性值对的形式
where:function(where){
if (typeof where==='object'){
var j=this.toArray(where);
this._where=j.join(' and ');
}else if (typeof where==='string'){
this._where=where;
}
return this;
},
//更新数据，data为属性值对形式
updateData:function(data,callback){
var that=this;
var sql="Update "+this._table;
data=this.toArray(data).join(',');
sql+=" Set "+data+" where "+this._where;
this.doQuery(sql,callback);
},
//根据条件保存数据，如果存在则更新，不存在则插入数据
saveData:function(data,callback){
var sql="Select * from "+this._table+" where "+this._where;
var that=this;
this.doQuery(sql,function(r){
if (r.length>0){
that.updateData(data,callback);
}else{
that.insertData([data],callback);
}
});
},
//获取数据
getData:function(callback){
var that=this;
var sql="Select * from "+that._table;
that._where.length>0?sql+=" where "+that._where:"";
that.doQuery(sql,callback);
},
//查询，内部方法
doQuery:function(sql,callback){
var that=this;
var a=[];
var bb=function(b,result){
if (result.rows.length){
for (var i=0;i<result.rows.length;i++){
a.push(result.rows.item(i));
}
}else{
a.push(result.rowsAffected);
}
if (callback){
callback.call(that,a);
}
}
db.transaction(function (t) {
t.executeSql(sql,[],bb,that.onfail) ;
})
},
//根据条件删除数据
deleteData:function(callback){
var that=this;
var sql="delete from "+that._table;
that._where.length>0?sql+=" where "+that._where:'';
that.doQuery(sql,callback);
},
//删除表
dropTable:function(){
var sql="DROP TABLE IF EXISTS "+this._table;
this.doQuery(sql);
},
_error:'',
onfail:function(t,e){
this._error=e.message;
console.log('----sqlite:'+e.message);
},
toArray:function(obj){
var t=[];
obj=obj || {};
if (obj){
for (var i in obj){
t.push(i+"='"+obj[i]+"'");
}
}
return t;
}
}
}
/*
examples:
var db=new lanxDB('testDB');
db.init('channel_list',[{name:'id',type:'integer primary key autoincrement'},{name:'name',type:'text'},{name:'link',type:'text'},{name:'cover',type:'text'},{name:'updatetime',type:'integer'},{name:'orders',type:'integer'}]);
db.init('feed_list',[{name:'parentid',type:'integer'},{name:'feed',type:'text'}]);
db.switchTable('channel_list').insertData([{name:'aa',link:'ss',updatetime:new Date().getTime()},{name:'bb',link:'kk',updatetime:new Date().getTime()}]);
db.where({name:'aa'}).getData(function(result){
console.log(result);//result为Array
});
db.where({name:'aa'}).deleteData(function(result){
console.log(result[0]);//删除条数
});
db.where({name:'bb'}).saveData({link:'jj'},function(result){
console.log(result);//影响条数
})
})
*/
注意函数里
if (callback){
callback.call(that,a);
}
这个地方有些问题，我是处理成
if (callback){
callback(that,a);
}
前端图片压缩，兼容体积.
https://github.com/think2011/LocalResizeIMG
一个bug，webview无法删除里面插入的图片。比较奇葩，而且delete也无法监听，所以需要从程序上内部进行处理，监听键盘，然后进行实时判断。这边简单搞，加了个删除图片的按钮，点击进行删除。后面有时间琢磨看看。
$('#edit_note_btn_delete_img')
.click(
function() {
if (window.edit_note_content.window.document
.getSelection().focusNode
.toString() == '[object HTMLBodyElement]') {
var focusOffset = window.edit_note_content.window.document
.getSelection().focusOffset;
$(
window.edit_note_content.window.document.body.childNodes)
.eq(focusOffset - 1)
.remove()
} else {
$('body', $edit_note_d).html()
}
});