/*=======================================================
函数功能:保存日志到本地数据库
=======================================================*/
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()转回去.

h5缓存之数据库的更多相关文章

  1. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  2. Django实现表单验证、CSRF、cookie和session、缓存、数据库多表操作(双下划綫)

    通常验证用户输入是否合法的话,是前端js和后端共同验证的,这是因为前端js是可以被禁用的,假如被禁用了,那就没法用js实现验证合法与否了,也就是即使用户输入的不合法,但是也没提示,用户也不知道怎么输入 ...

  3. 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题

    今天来分享一下Redis几道常见的面试题: 如何解决缓存雪崩? 如何解决缓存穿透? 如何保证缓存与数据库双写时一致的问题? 一.缓存雪崩 1.1什么是缓存雪崩? 回顾一下我们为什么要用缓存(Redis ...

  4. Redis怎么保持缓存与数据库一致性?

    将不一致分为三种情况: 1. 数据库有数据,缓存没有数据: 2. 数据库有数据,缓存也有数据,数据不相等: 3. 数据库没有数据,缓存有数据. 在讨论这三种情况之前,先说明一下我使用缓存的策略,也是大 ...

  5. 缓存与数据库一致性之二:高并发下的key重建(先淘汰cache再写db)的问题

    一.为什么数据会不一致 回顾一下上一篇文章<缓存与数据库一致性之一:缓存更新设计>中对缓存.数据库进行读写操作的流程. 写流程: (1)先淘汰cache (2)再写db 读流程: (1)先 ...

  6. 用泛型写Redis缓存与数据库操作工具类

    功能描述: 先从缓存获取数据,如果缓存没有,就从数据库获取数据,并设置到缓存中,返回数据. 如果数据库中没有数据,需要设置一个缓存标记flagKey,防止暴击访问数据库,用缓存保护数据库. 当删除缓存 ...

  7. 注解与AOP切面编程实现redis缓存与数据库查询的解耦

    一般缓存与数据库的配合使用是这样的. 1.查询缓存中是否有数据. 2.缓存中无数据,查询数据库. 3.把数据库数据插入到缓存中. 其实我们发现 1,3 都是固定的套路,只有2 是真正的业务代码.我们可 ...

  8. Redis缓存和数据库一致性问题

    工作中,经常会遇到缓存和数据库数据一致性问题.从理论上设置过期时间,是保证最终一致性的解决方案.这种方案下,我们可以对存入缓存的数据设置过期时间,所有的写操作以数据库为准,对缓存操作只是尽最大努力即可 ...

  9. PHP经典面试题:如何保证缓存与数据库的双写一致性?

    只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 面试题剖析 一般来说,如果允许缓存可以稍微的跟数据库偶尔有不一致的情况,也就是说 ...

随机推荐

  1. 【Dubbo实战】基础学习篇(一)

    Dubbo的简单介绍 是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000多个服务提供30多亿次訪问量支持.并被广泛应用于阿里巴巴集团的各成员网站. Dubbo是一个分布式服 ...

  2. Spring容器装饰者模式应用之实现业务类与服务类自由组合的解决方式

    在不论什么一个项目中都不可或缺的存在两种bean,一种是实现系统核心功能的bean,我们称之为业务类,第二种是与系统核心业务无关但同一时候又提供十分重要服务bean,我们称之为服务类.业务类的bean ...

  3. Struts2值栈的相关操作

    import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionContext; import ...

  4. 【NOI 2015】 程序自动分析

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4195 [算法] 并查集 [代码] #include<bits/stdc++.h ...

  5. Spark SQL概念学习系列之分布式SQL引擎

    不多说,直接上干货! parkSQL作为分布式查询引擎:两种方式 除了在Spark程序里使用Spark SQL,我们也可以把Spark SQL当作一个分布式查询引擎来使用,有以下两种使用方式: 1.T ...

  6. adplus 抓取dump

    工具所在路径   C:\Program Files\Windows Kits\10\Debuggers\x64 cmd窗口切换目录倒adplus所在路径下,输入抓取命令.adplus -hang -p ...

  7. 【转】SQL语句删除和添加外键、主键

    --删除外键 语法:alter table 表名 drop constraint 外键约束名 如: alter table Stu_PkFk_Sc drop constraint FK_s alter ...

  8. HTML5 CSS3面试题

    一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  9. 手机号获取省份,城市api的使用

    function get_mobile_area($mobile){ header('Content-Type:text/html;charset=gbk'); $url = 'http://life ...

  10. ZBrush软件中Brush特性

    在ZBrush里给用户提供了上百种用于雕刻的笔刷,每种笔刷的显示模式是以红色的两个圆圈,外面的圆圈表示笔刷在进行绘制和雕刻实际影响的范围,而内圆是表示笔刷强度到外圆的衰减的起始位置,可以在Focal ...