3***@qq.com
3***@qq.com
  • 发布:2016-09-26 17:32
  • 更新:2016-09-26 17:32
  • 阅读:11180

精华: HTML5 用 websql 模仿 localStorage 几乎无大小限制,比localStorage和plus.storage更加实用 by 刘涛

分类:MUI
2016-09-25  

websql_localStorage_liutao.js:  用 websql 模仿 localStorage 无大小限制  

websql操作来自网上资料,经过增强改进 , by liutao qq 30234923  
    数据库操作辅助类,定义对象、数据操作方法都在这里定义  

表 kv 三个字段: (k,v,更新时间)  
以下 kv 函数 会自动打开 数据库,建表 等等,简单调用即可  
注意 websql 为异步,你不能指望 setItem 后,下一句立刻就可以获取 变化后 的值。须在 回调函数 中继续下一句  

1.  
websql_exesql('delete from kv where k=?', ['小红']); // ['小红','a','b']  
websql_exesql(' delete from kv where k=\'小红\'; ');  
websql_exesql('CREATE INDEX IF NOT EXISTS idx_kv_k ON kv(k);');  
websql_exesql('CREATE INDEX IF NOT EXISTS idx_kv_k ON kv(k);', [], function(){  
    alert('搞定');  
});  

2.  
websql_localStorage_getItem('小红', function(k,v,更新时间,此k记录数){  
    alert( '\n' + k + '\n\n' + v + '\n\n' + 更新时间 );  

    if( 此k记录数 > 1 )  
        alert('不正常但未错: websql_localStorage_getItem: k=['+ k +'], 此k对应的记录数 = ' + 此k记录数);  
});  

3.  
websql_localStorage_setItem('小红', '嘿嘿嘿4');  
websql_localStorage_setItem('小红', '嘿嘿嘿3', function(k,v,更新时间){  
    alert( '\n' + k + '\n\n' + v + '\n\n' + 更新时间 );  
});  

4.  
websql_localStorage_removeItem('小红');  
websql_localStorage_removeItem('小红', function(k){  
    alert( '\n' + k + '\n\n' );  
});  

5.  
websql_localStorage_length( function(length){  
    alert( '\n websql_localStorage_length = ' + length + '\n\n' );  
});  

6.  
websql_localStorage_clear();  
3 关注 分享
gaus 云端笔记 skysowe

要回复文章请先登录注册

lxl

lxl

回复 3***@qq.com :
ios上storage事件无法触发
2017-10-18 10:13
3***@qq.com

3***@qq.com (作者)

我个人看法:(by刘涛 qq30234923 2016-09-27)

localStorage 速度快,但容量小 2~5M,适合 跨页 参数传递,保留少量数据(文本和小图片) 等
localStorage 有个被人忽视的优良特性, 如果你的程序需要在不同页面访问同一个值(localStorage键值),需要了解这个值是否已经被其他页面改变,可向浏览器注册storage事件来实现

window.addEventListener('storage', function(e) {
console.log(e.key + "'s value is changed from '"+ e.oldValue + "' to '" + e.newValue + "' by " + e.url);
}, false);

//A页面
localStorage['foo'] = 'bar';

//B页面
localStorage['foo'] = 'newBar';

可以用来网页端实现 im , 推送 等等,好处大大的

indexedDB 代码开发上 比较反人类,关联查询 多条件查询 处理困难,需要绕道实现,妥妥的nosql范,在 某些浏览器上有容量限制,大多数不限制,我没具体测试过。

websql(sqlite) 就很友好了,w3c 从2010年就不维护它了,是因为它没啥好维护的,就是sqlite的嵌入而已。sqlite已经很成熟,你总不至于期望 一个嵌入数据库达到 oracle 的效能吧,不能把 夏利 当 法拉利 来开。我在浏览器客户端塞了上百兆的数据,没毛病。


base64 是个好东西,对象文本化,加密 妥妥的,不过大了三分之一的体积,毛毛雨了。


下面这个方法比较好,我觉得如果和我的(websql 模仿 localStorage 方案)配合,则堪称完美,且跨平台 不需要基座,存个几十兆没问题。
html5 在本地存储保存图片和文件
http://www.tuicool.com/articles/fiYJry

所以我的看法是: localStorage + websql + base64 + html5本地存储保存图片和文件 + mui(或5+) = 肖奈(前端之微微倾城)
2016-09-27 05:52