HTML5 本地存储五种方案
2016-04-15 09:20
399 查看
1、LocalStorage
LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还
有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,示例代码如下:
Chrome中 的存储方式是以sqlite的数据库文件形式存储。存在C:\Users\Username\AppData\Local
\Google\Chrome\User Data\Default\Local Storage 中
2、Cookie
这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,举例如下:
3、Indexed Database API
IndexedDB可以存储结构对象,可构建key和index的索引方式查找,目前各浏览器的已经逐渐支持
IndexedDB的存储方式,其使用代码如下,需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式,
特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式,因此和NodeJS一样使用上不如同步的代码容易。
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();
}
4、FileSystem API
FileSystem API相当于操作本地文件的存储方式,目前支持浏览器不多,其接口标准也在发展制定变化中
,因此也可以动态生成图片到本地文件,然后通过 filesystem:http:*** 的URL方式直接赋值给img的
html元素的src访问。
5、Application Cache
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态:
LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还
有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,示例代码如下:
Chrome中 的存储方式是以sqlite的数据库文件形式存储。存在C:\Users\Username\AppData\Local
\Google\Chrome\User Data\Default\Local Storage 中
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']; } }
2、Cookie
这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,举例如下:
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; }
3、Indexed Database API
IndexedDB可以存储结构对象,可构建key和index的索引方式查找,目前各浏览器的已经逐渐支持
IndexedDB的存储方式,其使用代码如下,需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式,
特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式,因此和NodeJS一样使用上不如同步的代码容易。
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();
}
4、FileSystem API
FileSystem API相当于操作本地文件的存储方式,目前支持浏览器不多,其接口标准也在发展制定变化中
,因此也可以动态生成图片到本地文件,然后通过 filesystem:http:*** 的URL方式直接赋值给img的
html元素的src访问。
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; }
5、Application Cache
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态:
var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };
相关文章推荐
- HTML5表单_表单元素
- HTML5表单_输入类型
- HTML5_服务器发送事件
- 移动HTML5前端性能优化指南
- HTML5初级知识总结
- Html5 表单的LocalStorage
- HTMl5元素
- 基于 HTML5 的人脸识别技术
- html5新属性 download
- 浏览器对HTML5特性检测工具Modernizr
- HTML5学习笔记简明版(8):新增的全局属性
- H5 图片尺寸
- 初识html5基本格式
- html5摇一摇功能的实现
- 文章标题
- HTML5 :b/strong加粗,i/em倾斜区别
- html5-svg标签使用基础三
- html5-svg标签使用基础一
- html5-svg标签使用基础二
- html5--画布