phonegap 一个简单的离线存储小记事本

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注