之前想作個靜態網頁APP。最初的思路是用本地文件存儲數據,後來發如今手機上運行時,文件沒法找到。html
通過了長達幾個月的搜索(實際也就幾天),沒有找到合適的方法。node
就在絕望的時候,無心間搜到基於HTML5的各類保存數據的方法。在此簡單與你們分享一下。web
前四種是從http://www.hightopo.com/blog/344.html截取。sql
最古老的存儲方式爲Cookie,這種存儲方式存儲內容頗有限,只適合作簡單信息存儲,存取接口設計得極其反人類,爲了介紹HTML5存儲方案的完整性我順便把他給列上:chrome
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,李勇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,也可簡稱爲 IndexedDB(之前被稱做 WebSimpleDB),一樣是一個 Web 客戶端存儲結構化數據的規範,在 2009 年由 Oracle 提出。瀏覽器
若是說 Web SQL Databae 在客戶端實現了 傳統的 SQL 數據庫操做,那麼 Indexed Database 更相似於 NoSQL 的形式來操做數據庫 , 其中最重要的是 Indexed Database 不使用 SQL 做爲查詢語言。cookie
其數據存儲能夠不須要固定的表格模式,也常常會避免使用 SQL 的 JOIN 操做,而且通常具備水平可擴展性。session
目前 W3C 官方也把焦點 投到對 Indexed Database 規範的制定當中來,而 Microsoft 和 Mozilla 是對這個規範重要的兩個推進者,Firefox 4 以上已經部分實現了 Indexed DB API,而且 IE 10 中也將實現 Indexed DB API。因爲在手機等移動設備的瀏覽器中都沒有實現 Indexed DB API,因此其還有必定的侷限性,但這並不妨礙它做爲將來的 HTML5 的焦點而存在。nosql
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)
至關於操做本地文件的存儲方式,目前支持瀏覽器很少,其接口標準也在發展制定變化中,例如在這個代碼時大部分文獻使用的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'); }); }); }
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)