h5缓存之数据库

简介:
复制代码
/*=======================================================
    函数功能:保存日志到本地数据库
=======================================================*/
function saveLog(str)
{
    var db = window.openDatabase("web", "1.1", "log", 1024 * 1024);

    // 创建或打开数据库失败
    if(!db) { return; }

    // 创建表
    db.transaction(function(tx) {
     tx.executeSql("CREATE TABLE if not exists log (createtime TEXT, content TEXT)");
    });

    // 插入记录
    db.transaction(function(tx) {
     tx.executeSql("INSERT INTO log (createtime, content) values(?, ?)", [new Date().Format("yyyyMMdd hh:mm:ss"), str], null, null);
    });
}

/*=======================================================
    函数功能:查询本地数据库里的日志信息
=======================================================*/
function selectLog(sql)
{
    var db = window.openDatabase("web", "1.1", "log", 1024 * 1024);
    // 创建或打开数据库失败
    if(!db) { return; }

    // 查询数据
    db.transaction(function(tx)
    {

        if(sql == undefined || sql == "") { sql = "SELECT * FROM log"; }

        tx.executeSql(sql, [], function(tx, result)
      {
        for(var i = 0; i < result.rows.length; i++)
        {
            console.warn( result.rows.item(i)['content']);
        }
      },
      function()
      {
          console.error("查询失败! 原因:1、没有创建表; 2、表中无数据");
         });
    });
}

/*=======================================================
    函数功能:清空数据库表数据
=======================================================*/
function clearLog()
{
    var db = window.openDatabase("web", "1.1", "log", 1024 * 1024);
    // 创建或打开数据库失败
    if(!db) { return; }

    db.transaction(function(tx) {
     tx.executeSql("DROP TABLE log");
    });

}
复制代码

1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来!

2.解决方案:

   结合网上搜刮,考虑到了这几种方式:1)采用cookie; 2)看能不能采用浏览器的页面缓存来模拟 3)使用html5

  1)cookie使用(做测试是直接用浏览器打开没有效果,需要放到站点下)

     所有浏览器都支持,所以不需要去考虑兼容性的问题;

    浏览器对于同一domain最多支持20个左右cookie,每个cookie的长度也有限制,超长部分就会被截掉

    过期的限制:在cookie的生命周期内有效,过期就会被清掉

    还有就是每次对服务器的请求cookie都会附带上去增加了网络带宽

   鉴于以上几点考虑,并且项目中希望以文件形式存储,不予考虑!

   cookie存储操作示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function  setCookie() {
     var  value = $( '#data' ).val();
     if  (value !=  ''  && $.trim(value) !=  '' ) {
         var  expireDate =  new  Date();
         expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);
         document.cookie =  "data="  + escape(value) + ( "; expires="  + expireDate.toGMTString());
        
     else  {
         alert( '请输入要存储的数据!' );
     }
}
function  getCookie() {
     if  (document.cookie.length > 0) {
         var  startIndex = 5;
         var  endIndex = document.cookie.indexOf( ";" , 0);
         var  data =  "" ;
         if  (endIndex != -1) {
             data = unescape(document.cookie.substring(startIndex, endIndex));
             
         else  {
             data = unescape(document.cookie.substring(startIndex, document.cookie.length));
         }
         $( '#data-display' ).html(data);
     }
}

 2).localStorage

      html5本地存储分为两种,一是key-value对的形式存储,一种是DateBase存储;

    1.key-value本地存储有sessionStorage和localStorage两种

      sessionStorage:会话存储,生命期从进入网站开始,从关闭网站后结束

      localStorage:本地存储,即使关闭浏览器,再次打开时同样能够读取到存储的数据,这也是其与sessionStorage的区别

      示例:

1
2
window.localStorage.setItem( 'name' , 'istone' );
window.localStorage.getItem( 'name' );

  2.html5本地数据库,提供了一套API来操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  db = openDatabase( 'mydb' '1.0' 'Test DB' , 2 * 1024 * 1024);
         var  msg;
            
         db.transaction( function  (tx) {
            tx.executeSql( 'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)' );
            tx.executeSql( 'INSERT INTO LOGS (id, log) VALUES (1, "foobar")' );
            tx.executeSql( 'INSERT INTO LOGS (id, log) VALUES (2, "logmsg")' );
            msg =  '<p>Log message created and row inserted.</p>' ;
            document.querySelector( '#status' ).innerHTML =  msg;
         });
 
         db.transaction( function  (tx) {
            tx.executeSql( 'SELECT * FROM LOGS' , [],  function  (tx, results) {
               var  len = results.rows.length, i;
               msg =  "<p>Found rows: "  + len +  "</p>" ;
               document.querySelector( '#status' ).innerHTML +=  msg;
                    
               for  (i = 0; i < len; i++){
                  msg =  "<p><b>"  + results.rows.item(i).log +  "</b></p>" ;
                  document.querySelector( '#status' ).innerHTML +=  msg;
               }
            },  null );
         });

  浏览器支持情况

 

   3)h5File API

  对于页面数据的保存,采用js库将数据json化,如:JSON.stringify(),IE的数据保存网上搜到是调用浏览器'另存为'的功能来保存成 txt,而对于chrome的数据保存调用html5的API接口blob封装数据提供给a标签的href,文件名提供给download

  对于本地文件的读取,采用html5 fileAPI:FileReader,通过readAsText方法读取到本地json串,JSON.parser()转回去.



本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5575067.html,如需转载请自行联系原作者

相关文章
|
2月前
|
存储 缓存 数据库
解决缓存与数据库的数据一致性问题的终极指南
解决缓存与数据库的数据一致性问题的终极指南
190 63
|
3月前
|
消息中间件 canal 缓存
项目实战:一步步实现高效缓存与数据库的数据一致性方案
Hello,大家好!我是热爱分享技术的小米。今天探讨在个人项目中如何保证数据一致性,尤其是在缓存与数据库同步时面临的挑战。文中介绍了常见的CacheAside模式,以及结合消息队列和请求串行化的方法,确保数据一致性。通过不同方案的分析,希望能给大家带来启发。如果你对这些技术感兴趣,欢迎关注我的微信公众号“软件求生”,获取更多技术干货!
195 6
项目实战:一步步实现高效缓存与数据库的数据一致性方案
|
3月前
|
canal 缓存 NoSQL
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
根据对一致性的要求程度,提出多种解决方案:同步删除、同步删除+可靠消息、延时双删、异步监听+可靠消息、多重保障方案
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
|
4月前
|
消息中间件 缓存 监控
如何保证缓存和数据库的一致性?
保证缓存和数据库的一致性的做法
|
5月前
|
缓存 NoSQL Java
Redis 缓存与数据库数据不一致问题
Redis 缓存与数据库数据不一致问题
112 3
|
16天前
|
缓存 物联网 数据库
InfluxDB vs TDengine :2025 年了,谁家用的数据库还不能高效读缓存?
在工业互联网和物联网的大数据应用场景中,实时数据的写入和查询性能至关重要。如何快速获取最新设备状态并实时处理数据,直接影响到业务的高效运转。本文将深入分析 TDengine 和 InfluxDB 在缓存机制上的差异,帮助读者更好地理解这两款主流时序数据库在性能优化方面的优劣。
43 1
|
1月前
|
缓存 NoSQL 数据库
运用云数据库 Tair 构建缓存为应用提速,完成任务得苹果音响、充电套装等好礼!
本活动将带大家了解云数据库 Tair(兼容 Redis),通过体验构建缓存以提速应用,完成任务,即可领取罗马仕安卓充电套装,限量1000个,先到先得。邀请好友共同参与活动,还可赢取苹果 HomePod mini、小米蓝牙耳机等精美好礼!
|
2月前
|
缓存 弹性计算 NoSQL
新一期陪跑班开课啦!阿里云专家手把手带你体验高并发下利用云数据库缓存实现极速响应
新一期陪跑班开课啦!阿里云专家手把手带你体验高并发下利用云数据库缓存实现极速响应
|
2月前
|
存储 缓存 API
LangChain-18 Caching 将回答内容进行缓存 可在内存中或数据库中持久化缓存
LangChain-18 Caching 将回答内容进行缓存 可在内存中或数据库中持久化缓存
48 6
|
3月前
|
消息中间件 缓存 NoSQL
15)如何保证缓存和数据库之间的数据一致性
15)如何保证缓存和数据库之间的数据一致性
67 1
下一篇
DataWorks