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经典面试题:如何保证缓存与数据库的双写一致性?
只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 面试题剖析 一般来说,如果允许缓存可以稍微的跟数据库偶尔有不一致的情况,也就是说 ...
随机推荐
- 防止 Chrome 屏蔽 非官方 扩展程序 教程(二)
说明 前面介绍过一篇通过开发人员模式载入扩展程序的方法,尽管能够正常使用,可是每次又一次打开 Chrome 都会弹出询问窗体,比較麻烦.这里介绍第二种防止屏蔽的方法.与前一种方法相比,尽管应用的步骤多 ...
- idea使用技巧资料篇
基本使用:https://my.oschina.net/lujianing/blog/177042#OSC_h1_2 解决idea卡顿问题:http://www.cnblogs.com/ae6623/ ...
- angularjs1-路由
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Swift - 制作一个在线流媒体音乐播放器(使用StreamingKit库)
在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器(点击查看1.点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如何使用 ...
- 树状数组(Binary Indexed Tree(BIT))
先不说别的,这个博客为我学习树状数组提供了很大帮助,奉上传送门 http://blog.csdn.net/int64ago/article/details/7429868 然后就说几个常用的操作 in ...
- 知网下载pdf文件的方法
title: 知网下载pdf文件的方法 toc: false date: 2018-11-02 17:54:43 categories: methods tags: 知网 平时我们使用的是国内版的知网 ...
- Spark Streaming概念学习系列之SparkStreaming的高层抽象DStream
不多说,直接上干货! SparkStreaming的高层抽象DStream 为了便于理解,Spark Streaming提出了DStream抽象,代表连续不断的数据流. DStream 是一个持续的R ...
- table-layout:fixed属性
说实话,第一次见到这个属性有点懵圈,真是没见过这个属性 好了,直接说作用 table-layout其实是一种表格算法,用来显示表格单元格.行.列的算法规则. 固定表格布局: 固定表格布局与自动表格布局 ...
- android UI卡顿问题学习
转自https://blog.csdn.net/joye123/article/details/79425398 https://blog.csdn.net/zhenjie_chang/article ...
- python2中新式类和旧式类的对比【译】
Classes and instances come in two flavors: old-style (or classic) and new-style. ➤类和实例分为两大类:旧式类和新式类. ...