-
HTML5引入了兩個用于本地存儲的API, 分別是sessionStorage和localStorage，二者的使用方式是相同的固蚤，不同的是所存儲數(shù)據的存在時長。sessionStorage存儲的數(shù)據會在瀏覽器關閉的時候被清除蔚约，而localStorage存儲的數(shù)據會長期存在吃媒，除非用戶主動清除數(shù)據。使用方式如下爹袁。
var user_id = "123456";var user_data = { name: "Timo", sex: "unkown", tel: "666666" } //檢測瀏覽器是否支持 Storage APIs var storage_support = window.sessionStorage || window.localStorage; if (storage_support) { localStorage.setItem(user_id, JSON.stringify(user_data)); sessionStorage.setItem(user_id, JSON.stringify(user_data)); }
上面的代碼用到了 JSON.stringify() 方法远荠，一般來說我們用 JSON 來序列化復雜的數(shù)據對象。既然我們將數(shù)據保存下來了失息，那么我們如何獲取呢譬淳？
var user_id = "123456";
var user_data = {};
if (sessionStorage.getItem(user_id)) {
user_data = JSON.parse(sessionStorage.getItem(user_id));
} else if (localStorage.getItem(user_id)) {
user_data = JSON.parse(localStorage.getItem(user_id));
}
大多數(shù)的瀏覽器會給這些存儲器 5MB 的空間，這對于 localStorage 可能就有點不夠用了盹兢，畢竟它存儲的數(shù)據根本就沒有過期期限邻梆，除非用戶明確的刪除它們。所以绎秒，我們需要手動的設置一種過期機制浦妄，下面我們設置當數(shù)據存在 10 天之后就自動刪除的功能。
//檢測瀏覽器是否支持 Storage APIs
var storage_support = window.localStorage;
if (storage_support) {
localStorage.setItem(user_id, JSON.stringify(user_data));
//下面開始刪除過期數(shù)據
var key, data;
for (var i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
data = localStorage.getItem(key);
if (data.ts < ((new Date()) - 60 * 60 * 24 * 10)) {
localStorage.removeItem(key);
}
}
}
可見见芹，我們是在每次保存好數(shù)據剂娄，然后進行檢測，一旦發(fā)現(xiàn)存在時間超過十天的數(shù)據玄呛，就對其進行刪除宜咒。
-
HTML5定義了一個特殊的應用程序緩存，通常叫作appcache把鉴，我們可以利用這個告訴瀏覽器我們想要緩存的html, js, html或者圖片資源故黑。首先，我們需要創(chuàng)建一個manifest文件庭砍，比如下面
CACHE MANIFESTCACHE: index01.html
這個文件表明场晶，我們想要緩存 index01.html ，想要具備離線緩存功能怠缸，我們還需要給 html 元素添加一個屬性诗轻。
<html lang="en" manifest="cache.manifest">
當我們的頁面配置發(fā)生了變化，比如說我們緩存的 index01.html 文件內容發(fā)生了變化揭北，瀏覽器并不會重新緩存 index01.html扳炬，因為 manifest 文件并沒有更新吏颖，所以瀏覽器呈現(xiàn)的還是變化前的界面，這就非常煩人了恨樟，但是有一種非常簡單的方法可以解決這個問題半醉，我們只需要在文件中添加一行注釋，如下所示
CACHE MANIFEST
# cache version: 01
CACHE:
index01.html
每當我們更新緩存文件的內容的時候劝术，就讓注釋的版本增加缩多，這樣的話瀏覽器就會察覺到 manifest 的變化，然后去更新 appcache 的內容养晋，不過這么做有個缺點衬吆，那就是瀏覽器即使察覺到了 manifest， 它仍然會加載原來的界面直到下次再打開瀏覽器才會顯示更新后的界面绳泉。當然逊抡，這種情況我們可以在 JS 中調節(jié)它。
// 檢查當前瀏覽器是否支持 appcache
var appcache_support = !!window.applicationCache;
if (appcache_support) {
var cache = applicationCache;
cache.addEventListener("updateready", function () {
if (cache.status == cache.UPDATEREADY) {
cache.swapCache();
console.log("update");
}
}, false);
}
HTML5提供了Web Workers用以執(zhí)行耗時任務零酪，這個任務是處在一個單獨線程中的冒嫡，不占用UI線程，所以不會引起界面卡頓蛾娶。詳細的使用規(guī)范灯谣，可以參見 W3C Web Worker.如果想要創(chuàng)建在
Web應用程序和服務器之間的持久的潜秋，雙向的通信蛔琅，以便瀏覽器和服務器都能夠按照彼此的需要發(fā)送和接收信息，那么你可能會用到Web Sockets峻呛，由于對于Web Sockets的一致的瀏覽器支持是很難得罗售，所以最佳的做法是使用Socket.io中的一個庫。想要了解更多的信息钩述，可以參見 Socket.io.
