html5有哪些類型的儲存方式

青灯夜游
發布: 2022-03-15 14:52:17
原創
4778 人瀏覽過

html5的儲存類型:1、本地儲存“localstorage”,適用於長期儲存資料;2、本地儲存“sessionstorage”,儲存的資料在瀏覽器關閉後自動刪除;3、離線快取“application cache”,本地快取應用所需的檔案。

html5有哪些類型的儲存方式

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

h5之前,儲存主要是用cookies。 cookies缺點有在請求頭上帶著數據,大小是4k之內。主Domain污染。

主要應用程式:購物車、客戶登入

對於IE瀏覽器有UserData,大小是64k,只有IE瀏覽器支援。

HTML5 提供了兩種在客戶端儲存資料的新方法:

    ##localStorage - 沒有時間限制的資料儲存
  • sessionStorage - 針對一個session 的數據儲存
1.本地儲存localstorage

localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後,數據仍然可用。

localStorage:適用於長期儲存數據,瀏覽器關閉後資料不遺失;

#儲存方式:##以鍵值對(Key- Value)的方式存儲,永久存儲,永不失效,除非手動刪除。

大小:

每個網域5M

#支援情況:

注意:IE9 localStorage不支援本地文件,需要將專案署到伺服器,才可以支援!

檢測方法:

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}
登入後複製

常用的API:

##getItem //取記錄
  • setIten//設定記錄
  • #removeItem//移除記錄
  • key//取key所對應的值
  • clear//清除記錄

儲存的內容:

數組,圖片,json,樣式,腳本。 。 。 (只要是能序列化成字串的內容都可以儲存)

2.本機儲存sessionstorage

HTML5 的本機儲存API 中的localStorage 與sessionStorage 在使用方法上是相同的,差別在於sessionStorage 在關閉頁面後即被清空,而localStorage 則會一直儲存。

3.離線快取(application cache)

HTML5引入了應用程式快取器,可對​​web進行緩存,在沒有網路形況下使用,透過建立cache manifest文件,建立應用快取.

本機快取應用程式所需的檔案

使用方法:

#①設定manifest檔

頁面上:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
登入後複製

Manifest 文件:

manifest 文件是簡單的文字文件,它告知瀏覽器被快取的內容(以及不快取的內容)。

manifest 檔案可分為三個部分:

CACHE MANIFEST

 - 在此標題下列出的檔案將在首次下載後進行快取

#②NETWORK

 - 在此標題下列出的文件需要與伺服器的連接,且不會被快取

FALLBACK

 - 在此標題下列出的文件規定當頁面無法存取時的回退頁面(例如404 頁面)

完整demo:

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
 
NETWORK:
login.jsp
 
FALLBACK:
/html/ /offline.html
登入後複製
伺服器上:

manifest檔案需要配置正確的MIME-type,即"text/cache-manifest"。

如Tomcat:

<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
登入後複製

常用API:

核心是applicationCache對象,有個status屬性,表示應用快取的目前狀態:

0(UNCACHED) : ​​ 無緩存,即沒有與頁面相關的應用快取

1(IDLE) : 閒置,即應用快取未更新

2 ( CHECKING) : 檢查中,即正在下載描述檔並檢查更新

3 (DOWNLOADING) : 下載中,即應用快取正在下載描述檔中指定的資源

4 (UPDATEREADY) :更新完成,所有資源都已下載完畢

5 (IDLE) :  廢棄,即應用快取的描述檔已經不存在了,因此頁面無法再存取應用快取

相關的事件:

表示應用快取狀態的改變:

checking : 在瀏覽器為應用程式快取尋找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用快取資源時觸發

progress:在文件下載應用程式快取的過程中持續下載地觸發

updateready : 在頁面新的應用程式快取下載完成觸發

cached : 在應用快取完整可用時觸發

Application Cache的三個優點:

① 離線瀏覽

② 提升頁面載入速度

③ 降低伺服器壓力

注意事項:

1. 瀏覽器對快取資料的容量限制可能不太一樣(某些瀏覽器設定的限制是每個網站5MB)
2 . 如果manifest文件,或內部列舉的某一個文件不能正常下載,整個更新過程將視為失敗,瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源,在同一個網域下
4. 瀏覽器會自動快取引用manifest文件的HTML文件,這就導致如果改了HTML內容,也需要更新版本才能做到更新。
5. manifest檔案中CACHE則與NETWORK,FALLBACK的位置順序沒有關係,如果是隱含宣告需要在最前面
6. FALLBACK中的資源必須和manifest檔同源
7. 更新完版本後,必須刷新一次才會啟動新版本(會出現重刷一次頁面的狀況),需要新增監聽版本事件。
8. 網站中的其他頁面即使沒有設定manifest屬性,請求的資源如果在快取中也從快取中存取
9. 當manifest檔案改變時,資源請求本身也會觸發更新

離線快取與傳統瀏覽器快取區別:

1. 離線快取是針對整個應用,瀏覽器快取是單一檔案

2. 離線快取斷網路了還是可以開啟頁面,瀏覽器快取不行

3. 離線快取可以主動通知瀏覽器更新資源

相關推薦:《html影片教學

以上是html5有哪些類型的儲存方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板