基于 HTML5 的数据存储
以前想做个静态网页APP。最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到。
经过了长达几个月的搜索(实际也就几天),没有找到合适的方法。
就在绝望的时候,无意间搜到基于HTML5的各种保存数据的方法。在此简单与大家分享一下。
前四种是从http://www.hightopo.com/blog/344.html截取。
Cookie
最古老的存储方式为Cookie,这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,为了介绍HTML5存储方案的完整性我顺便把他给列上:
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = getCookieValue('DataModel');
if(value){
dataModel.deserialize(value);
console.log(getCookieValue('DataCount') + ' datas are restored');
return value;
}
return '';
}
function clear() {
if(getCookieValue('DataModel')){
console.log(getCookieValue('DataCount') + ' datas are cleared');
document.cookie = "DataModel=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
document.cookie = "DataCount=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
}
LocalStorage
最简单的存储方式LocalStorage,李勇Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,更多可参考 http://www.w3.org/TR/webstorage/
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
Indexed Database
Indexed Database,也可简称为 IndexedDB(以前被称作 WebSimpleDB),同样是一个 Web 客户端存储结构化数据的规范,在 2009 年由 Oracle 提出。
如果说 Web SQL Databae 在客户端实现了 传统的 SQL 数据库操作,那么 Indexed Database 更类似于 NoSQL 的形式来操作数据库 , 其中最重要的是 Indexed Database 不使用 SQL 作为查询语言。
其数据存储可以不需要固定的表格模式,也经常会避免使用 SQL 的 JOIN 操作,并且一般具有水平可扩展性。
目前 W3C 官方也把焦点 投到对 Indexed Database 规范的制定当中来,而 Microsoft 和 Mozilla 是对这个规范重要的两个推动者,Firefox 4 以上已经部分实现了 Indexed DB API,并且 IE 10 中也将实现 Indexed DB API。由于在手机等移动设备的浏览器中都没有实现 Indexed DB API,所以其还有一定的局限性,但这并不妨碍它作为未来的 HTML5 的焦点而存在。
request = indexedDB.open("DataModel");
request.onupgradeneeded = function() {
db = request.result;
var store = db.createObjectStore("meters", {keyPath: "id"});
store.createIndex("by_tag", "tag", {unique: true});
store.createIndex("by_name", "name");
};
request.onsuccess = function() {
db = request.result;
};
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
function restore(dataModel){
var tx = db.transaction("meters", "readonly");
var store = tx.objectStore("meters");
var req = store.openCursor();
var nodes = [];
req.onsuccess = function() {
var res = req.result;
if(res){
var value = res.value;
var node = createNode();
node.setId(value.id);
node.setTag(value.tag);
node.setName(value.name);
node.a({
'meter.value': value.meterValue,
'meter.angle': value.meterAngle
});
node.p3(value.p3);
node.r3(value.r3);
node.s3(value.s3);
nodes.push(node);
res.continue();
}else{
if(nodes.length){
dataModel.clear();
nodes.forEach(function(node){
dataModel.add(node);
});
console.log(dataModel.size() + ' datas are restored');
}
}
};
return '';
}
function clear(){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
var req = store.openCursor();
var count = 0;
req.onsuccess = function(event) {
var res = event.target.result;
if(res){
store.delete(res.value.id);
res.continue();
count++;
}else{
console.log(count + ' datas are cleared');
}
};
}
浏览器支持
支持:IE(10.0)FireFox(4.0~12.0)Chrome(10.0~18.0)
不支持:IE(6.0~9.0)Safari(3.1~6.0)Opera(10.5~12.0)iOS Safari(3.2~5.0)Android Browser(2.1~4.0)
FileSystem API
相当于操作本地文件的存储方式,目前支持浏览器不多,其接口标准也在发展制定变化中,例如在这个代码时大部分文献使用的webkitStorageInfo已被navigator.webkitPersistentStorage和navigator.webkitTemporaryStorage替代,
存储的文件可通过filesystem:http://www.hightopo.com/persistent/meters.txt’的URL方式在chrome浏览器中查找到,
甚至可通过filesystem:http://www.hightopo.com/persistent/类似目录的访问,因此也可以动态生成图片到本地文件,
然后通过filesystem:http:***的URL方式直接赋值给img的html元素的src访问,因此本地存储打开了一扇新的门,相信以后会冒出更多稀奇古怪的奇葩应用。
navigator.webkitPersistentStorage.queryUsageAndQuota(function (usage, quota) {
console.log('PERSISTENT: ' + usage + '/' + quota + ' - ' + usage / quota + '%');
}
);
navigator.webkitPersistentStorage.requestQuota(2 * 1024 * 1024,
function (grantedBytes) {
window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes,
function (fs) {
window.fs = fs;
});
}
);
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
function restore(dataModel) {
fs.root.getFile('meters.txt', {}, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
dataModel.clear();
dataModel.deserialize(reader.result);
console.log(dataModel.size() + ' datas are restored');
};
reader.readAsText(file);
});
});
return '';
}
function clear() {
fs.root.getFile('meters.txt', {create: false}, function(fileEntry) {
fileEntry.remove(function() {
console.log(fileEntry.toURL() + ' is removed');
});
});
}
Web SQL Database
HTML5 的 Web SQL Database 用本地和会话存储实现简单的对象持久化。
对于 HTML5,也许最有用的就是它新推出的“Web Storage” API。对于简单的键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是对繁琐的关系数据进行处理的时候,它就力所不及了,而这正是 HTML5 的“Web SQL Database” API 借口的应用所在。
但W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL Database 规范。
如果说 Web SQL Databae 在客户端实现了 传统的 SQL 数据库操作,那么 Indexed Database 更类似于 NoSQL 的形式来操作数据库 , 其中最重要的是 Indexed Database 不使用 SQL 作为查询语言。
目前 W3C 官方也把焦点 投到对 Indexed Database 规范的制定当中来,而 Microsoft 和 Mozilla 是对这个规范重要的两个推动者,Firefox 4 以上已经部分实现了 Indexed DB API,并且 IE 10 中也将实现 Indexed DB API。由于在手机等移动设备的浏览器中都没有实现 Indexed DB API,所以其还有一定的局限性,但这并 不妨碍它作为未来的 HTML5 的焦点而存在。
详细信息在其它文中说明。
浏览器支持
支持:FireFox(4.0~12.0)Chrome(10.0~18.0)Safari(3.1~6.0)Opera(10.5~12.0)iOS Safari(3.2~5.0)Android Browser(2.1~4.0)
不支持:IE(6.0~10.0)
基于 HTML5 的数据存储的更多相关文章
- HTML5客户端数据存储
HTML5 使在不影响网站性能的情况下存储大量数据成为可能.之前,这些都是由 cookie 完成的,cookie不适合大量数据的存储,因为会影响速度. 举个例子: var obj = {x:1}; / ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- 万亿级日志与行为数据存储查询技术剖析——Hbase系预聚合方案、Dremel系parquet列存储、预聚合系、Lucene系
转自:http://www.infoq.com/cn/articles/trillion-log-and-data-storage-query-techniques?utm_source=infoq& ...
- cocos2d-html5开发之本地数据存储
做游戏时常常须要的一个功能呢就是数据的保存了,比方游戏最高分.得到的金币数.物品的数量等等.cocos2d-html5使用了html5.所以html5的数据保存方法是对引擎可用的: html5本地数据 ...
- hadoop离线数据存储和挖掘架构
前序: 当你把你知道的东西,写下来,让人看明白是一种境界:当你能把自己写下来的东西给人讲明白,又是另一种境界.在这个过程中,我们都需要历练. 基于hadoop集群下海量离线数据存储和挖掘分析架构: 架 ...
- 基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 基于 HTML5 WebGL + VR 的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
随机推荐
- RT-Thread学习笔记(2)
这段时间稍微折腾了一下stm32,稍微知道了一点stm32程序的编写方法,所以再次拿起了rtt,因为这个东西确实很强大. 随手记录一下rtt的一些知识: 1.关于finsh 这是一个命令行系统,很好玩 ...
- Treeview1列表拒绝添加重复信息
function ItemExist(Text:string;TreeView:TTreeView):Boolean; var i: Integer; begin Result:=False; ...
- Adobe Texture Format
ATF : Adobe Texture Format. 这是一种能提供最佳压缩效果的文件格式. ATF文件主要是一个存储有损纹理数据(lossy texture data)的文件容器.它主要使用了两种 ...
- ActionScript 3 中的强制类型转换
以前AS中是这样进行强制类型转换的:假设有一个类叫做Class1,我们声明了一个它的对象 c1,如果想要将它转换成Class2类型,只要这样写: Class2(c1); 在AS3中你依然可以这样写,但 ...
- Metadata Lock原理5
[MySQL] 之一2015-09-05 15:46:51 分类: MySQL 一 简介 和MySQL打交道比较多的朋友,肯定遇到过 "Waiting for table metadata ...
- 【ZZ】大数据架构师基础:hadoop家族,Cloudera系列产品介绍
http://www.36dsj.com/archives/17192 大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为 ...
- TortoiseGit安装和使用的图文教程
ortoiseGit是Windows下不错的一款Git客户端工具,在Mac下推荐使用sourcetree.下面就介绍一下TortoiseGit安装和使用的方法. 安装TortoiseGit并使用它需要 ...
- Spark之路 --- Scala IDE Maven配置(使用开源中国的Maven库)和使用
为什么要使用Maven 摘自百度百科的介绍 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven 除了以程序构建能力为特色之外,还提 ...
- Helpers\FastCache
Helpers\FastCache phpFastCache is a high-performance, distributed object caching system, generic in ...
- Linux下php安装phpredis
说明:php安装目录:/usr/local/php5php.ini配置文件路径:/usr/local/php5/etc/php.iniNginx安装目录:/usr/local/nginxNginx网站 ...