HTML5存儲方式

時間 2021-02-14

標籤 css html html5 面試數據庫瀏覽器緩存安全服務器 cookie 欄目 HTML5 简体版

原文原文鏈接

因爲以前在參加面試或者筆試的過程當中常常會被問到HTML5存儲的內容，包括它們之間的區別、特徵和應用範圍，因此看到一篇介紹不錯的文章，把裏面的我的以爲適合個人內容按照本身的理解總結以下。方便之後忘記了進行備查。css

原文連接：HTML5 5大存儲方式總結html

Cookies的野蠻生長

在HTML5出現以前，Cookies便佔據了客戶端存儲的整個江山，就像是蠻荒時代的野蠻生長，cookies很好、快速地知足實際應用的需求。可是它的問題也很明顯，cookies會在請求頭上帶着數據，並且大小限制在4K之內，這是很是不安全的，容易被外部截取，還存在domain污染。html5

IE瀏覽器特別喜歡搞本身的一套，對於增長存儲容量加入了UserData，大小是64K，可是其餘瀏覽器不喜歡跟它玩，也就只有它本身一家支持。面試

那麼，重點來了。既然cookies問題那麼多，就要想辦法解決，否則無法繼續往前發展。首先要確認它的問題有哪些，而後根據這些問題尋找解決方案。數據庫

解決4K存儲容量問題
解決請求頭帶有存儲信息的問題，也就是增長安全性，經過加密通道或方式進行數據存儲和傳輸
解決關係型存儲的問題
跨瀏覽器

本地存儲localstorage

存儲方式瀏覽器

以鍵值對（key-value）的方式存儲，永久存儲，永不失效，除非手動刪除。緩存

存儲容量安全

每一個域名5M。服務器

經常使用的APIcookie

getItem //取記錄

setItem //設置記錄

removeItem //移除記錄

key //取key所對應的值

clear //清除記錄

本地存儲sessionstorage

HTML5的本地存儲API中的localstorage與sessionstorage在使用方法上是相同的，區別在於sessionstorage在關閉頁面後即被清空，而localstorage則會一直保存，除非手動刪除。

離線緩存（application cache）

本地緩存應用所需的文件

使用方法

一、配置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。

經常使用API

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0 （UNCACHED）：無緩存，沒有和頁面相關的應用緩存

1 （IDLE）：閒置，應用緩存沒有獲得更新

2 （CHECKING）：檢查中，正在下載描述文件並檢查更新

3 （DOWNLOADING）：下載中，應用緩存正在下載與描述文件中指定的資源

4 （UPDATEREADY）：更新完成，全部資源都已經下載完畢

5 （IDLE）：廢棄，應用緩存的描述文件已經不存在了，所以頁面沒法再訪問應用緩存

相關事件

表示應用緩存狀態的改變：

checking：在瀏覽器爲應用緩存查找更新時觸發

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

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

downloading：在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程當中持續不斷地下載時觸發

updateready：在頁面新的應用緩存下載完畢時觸發

cached：在應用緩存完整可用時觸發

application cache的三個優點：

離線瀏覽
提高頁面載入速度
下降服務器壓力

注意事項：

瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點5M）
若是是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視爲失敗，瀏覽器繼續所有使用舊的緩存
引用manifest的html必須與manifest文件同源，在同一個域下
瀏覽器會自動緩存引用manifest文件的html文件，這就致使了若是更改了html內容，也須要更新版本才能作到最新
manifest文件中的CACHE與NETWOrK、FALLBACK的位置順序沒有關係，若是是隱式聲明須要在最前面
FALLBACK中的資源必須和manifest文件同源
更新完版本後，必須刷新一次纔會啓動新版本（會出現重刷一次頁面的狀況），須要添加監聽版本事件
站點中的其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問
當manifest文件發生改變時，資源請求自己也會觸發更新

離線緩存和傳統瀏覽器緩存的區別

離線緩存是針對整個應用，瀏覽器緩存是單個文件
離線緩存能夠主動通知瀏覽器更新資源

Web SQL

Web SQL數據庫API並非HTML5規範的一部分，但它是一個獨立的規範，引入了一組使用SQL操做客戶端數據庫的APIs。

核心方法

openDatabase：使用現有的數據庫或新建的數據庫建立一個數據庫對象
transaction：控制一個事務，以及基於這種狀況執行提交或回滾
executeSql：用於執行實際的SQL查詢

打開數據庫

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

執行查詢操做

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

插入數據

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

讀取數據

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查詢記錄條數: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).name );
      }

   }, null);
});