html5的兩種儲存方法是什麼-前端問答-PHP中文網

html5的兩種儲存方法是什麼

青灯夜游

發布： 2022-01-23 17:36:24

原創

2380 人瀏覽過

html5的兩種儲存方法是：1、application cache（應用快取），web應用程式可以進行緩存，即使在沒有網路的情況下也能使用；2、本機儲存（localStorage或sessionStorage），可以在客戶端儲存資料。

html5的兩種儲存方法是什麼

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

1.Application Cache

HTML5引入應用程式緩存，表示web應用程式可以進行緩存，即使在沒有網路的情況下也能使用。

application cache有三個特點

每個指定了manifest的頁面在使用者對其存取時都會被快取。如果未指定 manifest 屬性，則頁面不會被快取（除非在 manifest 檔案中直接指定了該頁面）。

manifest 檔案的建議的檔案副檔名是：".appcache"。

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

登入後複製

manifest 文件是簡單的文字文件，它告知瀏覽器被快取的內容（以及不快取的內容）。

manifest 檔案可分為三個部分：

一個完整的manifest檔

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

登入後複製

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

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

localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等

localStorage和sessionStorage的方法：

setItem儲存value

用途：將value儲存到key欄位
用法：.setItem( key, value)
程式碼範例：

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

登入後複製

getItem取得value

使用：取得指定key本機儲存的值
用法：.getItem(key)
程式碼範例：

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

登入後複製

removeItem刪除key

用途：刪除指定key本機儲存的值
用法：.removeItem(key)
程式碼範例：

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

登入後複製

clear清除所有的key/value

#：清除所有的key/value
用法：.clear()

sessionStorage不是一種持久化存儲，瀏覽器關閉之後會隨之清除。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。