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() } });