首页 > 代码库 > 基于 HTML5 的数据存储
基于 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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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 的数据存储