HTML5儲存方式

2022-08-05 18:06:13 字數 4205 閱讀 7178

cookies的野蠻生長

本地儲存localstorage

本地儲存sessionstorage

web sql

indexeddb

html5出現之前,cookies便佔據了客戶端儲存的整個江山,就像是蠻荒時代的野蠻生長,cookies很好、快速地滿足實際應用的需求。但是它的問題也很明顯,cookies會在請求頭上帶著資料,而且大小限制在4k以內,這是非常不安全的,容易被外部擷取,還存在domain汙染。

ie瀏覽器特別喜歡搞自己的一套,對於增加儲存容量加入了userdata,大小是64k,但是其他瀏覽器不喜歡跟它玩,也就只有它自己一家支援。

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

儲存方式

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

儲存容量

每個域名5m

常用的api

getitem//取記錄

setitem//設定記錄

removeitem//移除記錄

key//取key所對應的值

clear//清除記錄

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

本地快取應用所需的檔案

使用方法

1、配置manifest檔案

頁面上:

manifest檔案:

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

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

1 (idle):閒置,應用快取沒有得到更新

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

相關事件

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

checking:在瀏覽器為應用快取查詢更新時觸發

noupdate:在檢查描述檔案發現檔案無變化時觸發

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

離線瀏覽

提升頁面載入速度

降低伺服器壓力

注意事項:

瀏覽器對快取資料的容量限制可能不太一樣(某些瀏覽器設定的限制是每個站點5m

引用manifesthtml必須與manifest檔案同源,在同一個域下

瀏覽器會自動快取引用manifest檔案的html檔案,這就導致瞭如果更改了html內容,也需要更新版本才能做到最新

manifest檔案中的cachenetworkfallback的位置順序沒有關係,如果是隱式宣告需要在最前面

fallback中的資源必須和manifest檔案同源

更新完版本後,必須重新整理一次才會啟動新版本(會出現重刷一次頁面的情況),需要新增監聽版本事件

站點中的其他頁面即使沒有設定manifest屬性,請求的資源如果在快取中也從快取中訪問

manifest檔案發生改變時,資源請求本身也會觸發更新

離線快取和傳統瀏覽器快取的區別

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

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

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) )

插入資料

注:部落格主題裡的**塊樣式
var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024);

db.transaction(function (tx) );

注:需要實現的**塊樣式,這個是 markdowpad2 裡的操作,也是很多markdown寫作工具提供的操作,只需要按一下 tab 鍵,非常方便
var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024);

db.transaction(function (tx) );

讀取資料

db.transaction(function (tx) 

}, null);

});

非同步api

indexeddb大部分操作並不是我們常用的呼叫方法(返回結果的模式),而是(請求-響應模式),比如開啟資料庫的操作

本文**於:猿2048→

HTML5

一 html5新增的input表單輸入型別 1 email郵箱型別 如果輸入錯誤的格式,提交時會有提示 2 url地址型別 如果輸入錯誤的u...

HTML5

en 說明 宣告是html5檔案 lang en 主要語言是英文,中文是 zh cn 註釋標記 refresh content 2 url...

html5

目標 1, 需要掌握 css的載入格式。2, keywords description 字符集 跳轉3 擴充套件瞭解 robots txt 檔案標籤 link rel載入的什麼樣的文件 stylesheet type 後面接mime 型別,就是告訴瀏覽器這是神馬型別的文件,你該怎麼樣處理? 李文凱 th...