html5客戶端存儲

『壹』 html5 的 localStorage 可否設置數據的時效時間

1.在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲

sessionStorage - 針對一個 session 的數據存儲

localStorage 方法：

localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。

如何創建和訪問 localStorage：

實例:

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

下面的例子對用戶訪問頁面的次數進行計數：

總結：html5 的 localStorage 用於存儲一些臨時的離線數據

localStorage 和 file、database 一樣，是存儲，有永久性質。

你存入資料庫的數據，不會在某一天突然被刪除了。

你保存到硬碟裡面的文件，也不會再某一天突然消失了。

所以，localStorage 本身沒有時效性，因為 storage 畢竟不是 cache。

因此，只能用 js 手動清除了。

『貳』 HTML5本地存儲機制是怎樣的

HTML5 是下一代 HTML 標准，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區別是 DOM Storage 提供了更大容量的存儲空間。
目前，在客戶端保存數據使用最多的是 cookie，但 cookie 的大小上限為 4KB，並且每次請求一個新頁面時 cookie 都會被發送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash。現在，HTML5 提供了一種標準的介面，使程序員可以簡單地訪問存儲的數據。由於鍵值對存儲在本地計算機上，在頁面載入完畢後可以通過 JavaScript 來操作這些數據。
HTML5 的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字元串。如果存入的數據太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。
安全性
一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數據存儲後使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數據。
存儲事件驅動
如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 介面提供的事件。

『叄』 如何設置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 離線存儲，有何不同

HTML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲 (關閉瀏覽器依然存在）

• sessionStorage - 針對一個 session 的數據存儲 （關閉瀏覽器後即清空）

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，數據不是由每個伺服器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。

對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。

HTML5 使用 JavaScript 來存儲和訪問數據。

『伍』 介紹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 本地存儲有多少種方案

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 的「本地存儲」有什麼作用，是用在什麼地方的，還有。離線應用程序，都是用來做什麼的！啊啊啊！！

html5的本地存儲 就是一個輕量級的sqllite資料庫
離線應用 是ApplicationCache 用於在斷開網路連接的情況下 讀取本地緩存
瀏覽器緩存 不安全
本地緩存 可以指定緩存頁面 及文件