html5存儲
『壹』 html5 本地存儲有多少種方案
html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
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幾種在客戶端存儲數據的實例詳解
LocalStorage
LocalStorage用於持久化的本地存儲，存儲資料在客戶端（client）的瀏覽器上，除非主動刪除數據，否則數 據是永遠不會過期的。LocalStorage使用鍵值對的方式進行存儲，存儲的方式只能是字元串。存儲內容可以有圖片、json、樣式、腳本等只要可以序列化為字元串的。
2 . SessionStorage
SessionStorage用於本地存儲一個會話中 的數據，這些數據只有在同一個會話中的頁面才能訪問並且會話結束，例如關閉窗口後，，數據也會隨之被銷毀。它是一種會話級別的存儲。
SessionStorage的使用方法與localstorage的使用方法相似。
3. 離線緩存（application cache）
HTML5引入了應用程序緩存器，可對web進行緩存，在沒有網路形況下使用，通過創建cache manifest文件,創建應用緩存。
『叄』 HTML5有哪些存儲方式
1.本地存儲localstorage、2.本地存儲sessionstorage、3.離線緩存（application cache）、4.Web SQL、5.IndexedDB
『肆』 HTML5存儲類型有什麼區別
1.本地存儲localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
2.本地存儲sessionstorage
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
3.離線緩存（application cache）
本地緩存應用所需的文件
使用方法：
①配置manifest文件
4.Web SQL
關系資料庫，通過SQL語句訪問
Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
5.IndexedDB
索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。
『伍』 HTml5中的Web Storage的存儲量有多大
5MB的存儲空間（不同瀏覽器的提供的空間不同），Cookie僅4KB，比Cookie大多了
『陸』 html5有哪些類型的存儲
session級別的sessionStorage,只在當前域名內才有效，當瀏覽器窗口關閉，存入的值跟著也消失，它提供三個方法getItem("key")\setItem(key,value)\removeItem(key);
cookie級別的localStorage，永久存在瀏覽器中，方法跟sessionStorage一樣
『柒』 介紹HTML5幾種存儲方式
HTML5 提供了兩種在客戶端存儲數據的新方法：..兩者都是僅在客戶端（即瀏覽器）中保存，不參與和伺服器的通信；
localStorage - 沒有時間限制的數據存儲,第二天、第二周或下一年之後，數據依然可用。
如何創建和訪問 localStorage：
<scripttype="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子對用戶訪問頁面的次數進行計數：
<scripttype="text/javascript">
if(localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount)+1;
}
else{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"time(s).");
</script>
sessionStorage - 針對一個 session 的數據存儲,當用戶關閉瀏覽器窗口後，數據會被刪除。
創建並訪問一個 sessionStorage：
<scripttype="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：
<scripttype="text/javascript">
if(sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}
else{
sessionStorage.pagecount=1;
}
document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");
</script>
sessionStorage 、localStorage的區別
共同點：都是保存在瀏覽器端，且同源的。
區別：數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。
『捌』 如何設置html5本地存儲
web存儲最初作為HTML5的一部分被定義成API形式，但是後來被剝離出來作為獨立的標准了。
web存儲表轉所描述的API包含localStorage對象和SessionStorage對象，這兩個對象實際上是持久化關聯數組，是名值對的映射表，「名」和「值」都是字元串。
例子：
varname=localStorage.username;//查詢一個儲存的值
name=localStorage["username"];//等價於數組表示法
if(!name){
name=prompt("whatisyourname?");
localStorage.username=name;
}
//迭代所有存儲的name/value對
for(varnameinlocalStorage){
varvalue=localStorage[name];
}
『玖』 html5的localStorage進行數據儲存
把相應的數據對用json對象的形式保存
比如 var jsonData = {'name':'lisi','age':'20','address':'fuzhou'};
再把json對象轉成字元串 var str=JSON.stringify(jsonData);
然後就可以保存了 localStorage.setItem('addData', str)；
到時候再把var getData = localStorage.getItem('addData')取出來後得到的也是字元串
所以還需把結果解析成json對象 var data = JSON.parse(getData);
這樣就得到json對象數據了， 就有data.name='lisi'，data.age='20' 一次類推
ps：數據也是可以和json對象一樣進行處理保存的
『拾』 html5離線存儲有幾種方式
h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。
目標
解決4k的大小問題
解決請求頭常帶存儲信息的問題
解決關系型存儲的問題
跨瀏覽器
1.本地存儲localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
大小：
每個域名5M