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()转回去.
h5缓存之数据库的更多相关文章
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- Django实现表单验证、CSRF、cookie和session、缓存、数据库多表操作(双下划綫)
通常验证用户输入是否合法的话,是前端js和后端共同验证的,这是因为前端js是可以被禁用的,假如被禁用了,那就没法用js实现验证合法与否了,也就是即使用户输入的不合法,但是也没提示,用户也不知道怎么输入 ...
- 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题
今天来分享一下Redis几道常见的面试题: 如何解决缓存雪崩? 如何解决缓存穿透? 如何保证缓存与数据库双写时一致的问题? 一.缓存雪崩 1.1什么是缓存雪崩? 回顾一下我们为什么要用缓存(Redis ...
- Redis怎么保持缓存与数据库一致性?
将不一致分为三种情况: 1. 数据库有数据,缓存没有数据: 2. 数据库有数据,缓存也有数据,数据不相等: 3. 数据库没有数据,缓存有数据. 在讨论这三种情况之前,先说明一下我使用缓存的策略,也是大 ...
- 缓存与数据库一致性之二:高并发下的key重建(先淘汰cache再写db)的问题
一.为什么数据会不一致 回顾一下上一篇文章<缓存与数据库一致性之一:缓存更新设计>中对缓存.数据库进行读写操作的流程. 写流程: (1)先淘汰cache (2)再写db 读流程: (1)先 ...
- 用泛型写Redis缓存与数据库操作工具类
功能描述: 先从缓存获取数据,如果缓存没有,就从数据库获取数据,并设置到缓存中,返回数据. 如果数据库中没有数据,需要设置一个缓存标记flagKey,防止暴击访问数据库,用缓存保护数据库. 当删除缓存 ...
- 注解与AOP切面编程实现redis缓存与数据库查询的解耦
一般缓存与数据库的配合使用是这样的. 1.查询缓存中是否有数据. 2.缓存中无数据,查询数据库. 3.把数据库数据插入到缓存中. 其实我们发现 1,3 都是固定的套路,只有2 是真正的业务代码.我们可 ...
- Redis缓存和数据库一致性问题
工作中,经常会遇到缓存和数据库数据一致性问题.从理论上设置过期时间,是保证最终一致性的解决方案.这种方案下,我们可以对存入缓存的数据设置过期时间,所有的写操作以数据库为准,对缓存操作只是尽最大努力即可 ...
- PHP经典面试题:如何保证缓存与数据库的双写一致性?
只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 面试题剖析 一般来说,如果允许缓存可以稍微的跟数据库偶尔有不一致的情况,也就是说 ...
随机推荐
- 【Dubbo实战】基础学习篇(一)
Dubbo的简单介绍 是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000多个服务提供30多亿次訪问量支持.并被广泛应用于阿里巴巴集团的各成员网站. Dubbo是一个分布式服 ...
- Spring容器装饰者模式应用之实现业务类与服务类自由组合的解决方式
在不论什么一个项目中都不可或缺的存在两种bean,一种是实现系统核心功能的bean,我们称之为业务类,第二种是与系统核心业务无关但同一时候又提供十分重要服务bean,我们称之为服务类.业务类的bean ...
- Struts2值栈的相关操作
import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionContext; import ...
- 【NOI 2015】 程序自动分析
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4195 [算法] 并查集 [代码] #include<bits/stdc++.h ...
- Spark SQL概念学习系列之分布式SQL引擎
不多说,直接上干货! parkSQL作为分布式查询引擎:两种方式 除了在Spark程序里使用Spark SQL,我们也可以把Spark SQL当作一个分布式查询引擎来使用,有以下两种使用方式: 1.T ...
- adplus 抓取dump
工具所在路径 C:\Program Files\Windows Kits\10\Debuggers\x64 cmd窗口切换目录倒adplus所在路径下,输入抓取命令.adplus -hang -p ...
- 【转】SQL语句删除和添加外键、主键
--删除外键 语法:alter table 表名 drop constraint 外键约束名 如: alter table Stu_PkFk_Sc drop constraint FK_s alter ...
- HTML5 CSS3面试题
一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...
- 手机号获取省份,城市api的使用
function get_mobile_area($mobile){ header('Content-Type:text/html;charset=gbk'); $url = 'http://life ...
- ZBrush软件中Brush特性
在ZBrush里给用户提供了上百种用于雕刻的笔刷,每种笔刷的显示模式是以红色的两个圆圈,外面的圆圈表示笔刷在进行绘制和雕刻实际影响的范围,而内圆是表示笔刷强度到外圆的衰减的起始位置,可以在Focal ...