-
H5緩存
sessionStorage
<body>
#描述
sessionStorage的使用,存儲數據到本地,存儲的容量5mb左右
1.這個數據本質是存儲在當前頁面的內存中
2.它的生命週期爲關閉當前頁面,關閉頁面,數據會自動清除
#語法
setItem(key,value):存儲數據,以鍵值對方式存儲
getItem(key):獲取數據,通過指定名稱的key獲取對應的value值
removeItem(key):刪除數據,通過指定名稱的key刪除對應的value值
clear():清空所有存儲的內容
<input type="text" id="userName"/></br>
<input type="button" value="設置數據" id="setData"/></br>
<input type="button" value="獲取數據" id="getData"/></br>
<input type="button" value="刪除數據" id="removeData"/></br>
<script>
//存儲數據
document.querySelector("#setData").onclick = function(){
//獲取用戶名
var name = document.querySelect("#userName").value;
//存儲數據
window.sessionStorage.setItem("userName",name);
}
//獲取數據
document.querySelector("#getData").onclick = function(){
//如果找不到對應名稱的key,那麼就會獲取null
var name = window.sessionStorage.getItem("userName");
alert(name);
}
//刪除數據
document.querySelector("#removeData").onclick = funciton(){
//在刪除的時候如果key值錯誤,不會報錯,但是也不會刪除數據
window.sessionStorage.removeItem("userName1");
}
</script>
</body>
localStorage
<body>
#描述
localStorage的使用,存儲數據到本地,存儲的容量20mb左右
1.不同的瀏覽器不能共享數據,但是在同一個瀏覽器的不同窗口中可以共享數據
2.永久生效,它的數據是存儲在硬盤上,並不會隨着頁面或者瀏覽器關閉而清除,如果想清除,必須手動清除
#語法
setItem(key,value):存儲數據,以鍵值對方式存儲
getItem(key):獲取數據,通過指定名稱的key獲取對應的value值
removeItem(key):刪除數據,通過指定名稱的key刪除對應的value值
clear():清空所有存儲的內容
<input type="text" id="userName"/></br>
<input type="button" value="設置數據" id="setData"/></br>
<input type="button" value="獲取數據" id="getData"/></br>
<input type="button" value="刪除數據" id="removeData"/></br>
<script>
//存儲數據
document.querySelector("#setData").onclick = function(){
//獲取用戶名
var name = document.querySelect("#userName").value;
//存儲數據
window.localStorage.setItem("userName",name);
}
//獲取數據
document.querySelector("#getData").onclick = function(){
//如果找不到對應名稱的key,那麼就會獲取null
var name = window.localStorage.getItem("userName");
alert(name);
}
//刪除數據
document.querySelector("#removeData").onclick = funciton(){
//在刪除的時候如果key值錯誤,不會報錯,但是也不會刪除數據
window.localStorage.removeItem("userName1");
}
</script>
</body>
二者使用及優勢
a) 可配置需要緩存的資源
b) 網絡無連接應用仍可用
c) 本地讀取緩存資源，提升訪問速度，增強用戶體驗
d) 減少請求，緩解服務器負擔
想使用應用緩存，我們就需要
1.創建應用緩存清單
2.讓頁面去使用，加載緩存清單文件
使用過程
1.添加緩存清單文件的引用
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
注意：建議擴展名是appcache
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）
2.創建並設置緩存清單文件，意味着我們需要確定那些文件需要緩存，那些文件每次都會服務器獲取
CACHE MANIFEST
#第一句必須是CACHE MANIFEST
#CACHE:寫在這個下面的文件默認都會被緩存
CACHE:
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
#NETWORK:寫在這上下面的文件默認每次都需要從服務器重新獲取
NETWORK:
../images/l3.jpg
#FALLBACK:寫在這個下面的文件，如果找不到資源，則使用指定的資源進行替換
FALLBACK:
../images/l4.jpg banner_1.jpg
# /:代表任意的文件
3.添加mime類型：
manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest".必須在 web 服務器上進行配置
-
H5的離線緩存技術
什麼是Manifest：
Manifest（清單）是一個簡單的文本文件，它的擴展名是任意的，定義需要緩存的文件、資源，當第一次打開時，瀏覽器會自動緩存相應的資源。
Manifest 的特點：
- 離線瀏覽：即當網絡斷開時，可以繼續訪問你的頁面。
- 訪問速度快：將文件緩存到本地，不需每次都從網絡上請求。
- 穩定性：做了Manifest緩存，遇到突發網絡故障或者服務器故障，繼續訪問本地緩存。
manifest屬性，可以用來指定當前頁面的manifest文件。
創建一個和html同名的manifest文件，比如頁面爲index.html，那麼可以建一個cache.manifest的文件，然後給index.html的html標籤添加如下屬性即可：
<html lang="en" manifest="cache.manifest"> 或<html manifest="http://www.example.com/index.manifest">
1、manifest 的引入可以使用絕對路徑/相對路徑，如果是絕對路徑，manifest文件必須和當前站點掛在同一個域名下。
2、manifest文件可以保存爲任意的擴展名，但mime-type 必須是 text/cache-manifest。
mime-type(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展類型
<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服務器上部署時需要在服務器上添加相應的mime-type
3、manifest 標籤應該包含到你需要緩存資源的頁面，當第一次打開該頁面時，瀏覽器會解析該頁面中的mainfest，並緩存裏面列舉的資源，同時該頁面也會自動會被瀏覽器緩存，即使該頁面沒有在Manifest中列出。
如果page-url 頁面中包含了 Manifest 屬性則瀏覽器會將該頁面中列舉出來的資源分別保存，所以Manifest最好使用在SPA（單頁應用）項目中。
如何更新緩存
如下三種方式，可以更新緩存：
更新manifest文件
通過javascript操作
清除瀏覽器緩存
給manifest添加或刪除文件，都可更新緩存，如果更改了js而沒有新增或刪除，可通過版本號，來更新manifest文件。
html5中引入了js操作離線緩存的方法，可以通過js代碼手動更新本地緩存。
window.applicationCache.update();
如果用戶清除了瀏覽器緩存（手動或用其他一些工具）會重新下載文件。
可使用代碼手動更新manifest緩存，一旦webapp源碼更新，會自動更新本地manifest緩存，使用戶始終訪問到最新的源碼。
webapp
使用HTML5編寫的移動Web應用，一個webapp幾乎可以不加修改的運行在PC/Android/iOS等。
優勢：一套代碼到處運行
劣勢：某些底層功能缺失，運行速度不如原生的App
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache .swapCache(); //交換緩存 成功拿到新的緩存，在新的緩存中交換
if (confirm('A new version of this site is available. Load it?'))
window.location.reload(); //重新加載頁面---刷新頁面
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false); 異步加載