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,如需转载请自行联系原作者

相关文章
|
6天前
|
存储 缓存 数据库
解决缓存与数据库的数据一致性问题的终极指南
解决缓存与数据库的数据一致性问题的终极指南
88 63
|
23天前
|
消息中间件 canal 缓存
项目实战:一步步实现高效缓存与数据库的数据一致性方案
Hello,大家好!我是热爱分享技术的小米。今天探讨在个人项目中如何保证数据一致性,尤其是在缓存与数据库同步时面临的挑战。文中介绍了常见的CacheAside模式,以及结合消息队列和请求串行化的方法,确保数据一致性。通过不同方案的分析,希望能给大家带来启发。如果你对这些技术感兴趣,欢迎关注我的微信公众号“软件求生”,获取更多技术干货!
65 6
项目实战:一步步实现高效缓存与数据库的数据一致性方案
|
1月前
|
canal 缓存 NoSQL
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
根据对一致性的要求程度,提出多种解决方案:同步删除、同步删除+可靠消息、延时双删、异步监听+可靠消息、多重保障方案
Redis缓存与数据库如何保证一致性?同步删除+延时双删+异步监听+多重保障方案
|
2月前
|
消息中间件 缓存 监控
如何保证缓存和数据库的一致性?
保证缓存和数据库的一致性的做法
|
3月前
|
缓存 NoSQL Java
Redis 缓存与数据库数据不一致问题
Redis 缓存与数据库数据不一致问题
80 3
|
4天前
|
存储 缓存 API
LangChain-18 Caching 将回答内容进行缓存 可在内存中或数据库中持久化缓存
LangChain-18 Caching 将回答内容进行缓存 可在内存中或数据库中持久化缓存
19 6
|
15天前
|
消息中间件 缓存 NoSQL
15)如何保证缓存和数据库之间的数据一致性
15)如何保证缓存和数据库之间的数据一致性
31 1
|
2月前
|
缓存 NoSQL Redis
一天五道Java面试题----第九天(简述MySQL中索引类型对数据库的性能的影响--------->缓存雪崩、缓存穿透、缓存击穿)
这篇文章是关于Java面试中可能会遇到的五个问题,包括MySQL索引类型及其对数据库性能的影响、Redis的RDB和AOF持久化机制、Redis的过期键删除策略、Redis的单线程模型为何高效,以及缓存雪崩、缓存穿透和缓存击穿的概念及其解决方案。
|
2月前
|
存储 缓存 关系型数据库
Django后端架构开发:缓存机制,接口缓存、文件缓存、数据库缓存与Memcached缓存
Django后端架构开发:缓存机制,接口缓存、文件缓存、数据库缓存与Memcached缓存
38 0
|
3月前
|
缓存 NoSQL 数据库
Redis问题之在高并发场景下,保证Redis缓存和数据库的一致性如何解决
Redis问题之在高并发场景下,保证Redis缓存和数据库的一致性如何解决
121 3