HTML5儲存 學習總結

2021-09-23 18:19:23 字數 1674 閱讀 4966

思維導圖

本地儲存( localstorage && sessionstorage)

indexeddb 和 web sql

sessionstorage

5m,重新開啟頁面或者關閉瀏覽器就消失了,關閉tab欄消失

localstorage

每個網域名稱5m,永久儲存,永不失效,除非手動刪除

ie8以上支援

localstorage api介紹(getitem 、setitem、removeitem、key、clear)

只要能轉換成字串的都能存在localstorage,陣列、json資料、 ;(利用canvas最終轉換成字串.使用在不經常更改的情況下,不過如果bash64比較大的話,會比較浪費資源)、指令碼、樣式檔案

注意事項:

(1) 使用前要判斷瀏覽器是否支援;( setitem,然後catch異常;網上有window.localstorage的方法,不好,有的瀏覽器可以寫入,但無法讀出 )

(2) 寫資料時候,需要異常處理,避免超出容量拋錯;(5m)

(3) 避免把敏感的資訊存入localstorage

(4) key的唯一性;(再次存入,會覆蓋)

localstorage使用限制

(1) 儲存更新策略,過期控制(永不過期,常駐瀏覽器的記錄,業務中實現過期的策略,需要自己加,通過當前時間-localstorage時間差與過期時間比較大小進行過期控制);

(2) 子網域名稱之間不能共享儲存資料;( cookie支援:可以通過把子網域名稱的document.domain設定成主網域名稱,各個子網域名稱既可以共享資料。可以通過postmessage達到子網域名稱共享localstorage資料的目的)。

(3) 超出儲存大小之後如何儲存( 用一些比較成熟的演算法淘汰一些資料,如:lru, fifo );

(4) server端如何取到;( cookie在服務端是可以取到的;localstorage/sessionstorage是純客戶端儲存,在服務端取不到,如果要取到, 跟到post/get請求相應的引數後面,以達到該目的; )

定義:一種能在瀏覽器中持久儲存結構化資料的資料庫,並為web應用提供了豐富的查詢能力。就是瀏覽器提供的本地資料庫,它可以被網頁指令碼建立和操作。indexeddb 允許儲存大量資料,提供查詢介面,還能建立索引

使用教程

優點:

完全離線;

資源被快取,載入更快;

降低server負載。

缺點:含有manifest屬性的當前頁一定會被快取;

更新依賴manifest檔案,更新後需要再次重新整理;

更新是全域性性的,無法單點更新;

對於鏈結的引數變化敏感,不同的引數視為不同的檔案。

總結

儲存空間大

介面豐富

資料相對安全

關係型省流量

同源策略;( localstorage 不可以跨子域,manifest 所引用的檔案必須在同乙個網域名稱下面 )

指令碼控制;( 只能在瀏覽器端存放;伺服器端想拿到資料,只能通過請求 )

更新策略; ( 不像cookie可以設定過期時間;比如localstorage永不過期,必須自己寫一套更新機制 )

HTML5儲存方式總結

html5之前,主要使用cookies儲存。cookie實際上是一小段的文字資訊。客戶端請求伺服器,如果伺服器需要記錄該使用者狀態,就向客戶端瀏覽器頒發乙個cookie。客戶端瀏覽器會把cookie儲存起來。當瀏覽器再請求該 時,瀏覽器把請求的 連同該cookie一同提交給伺服器。伺服器檢查該coo...

HTML5學習總結

我的部落格歡迎討論啊,又問必答哦 音訊canvas web儲存 input型別 表單元素 表單屬性 標籤 width 320 height 240 controls controls src g 桌面 1.mp4 type video mp4 your browser does not suppor...

HTML5入門學習總結

這兩天了解學習了一下html5的一些特性,做一些簡單的知識總結 還具有其他屬性autoplaycontrolsautobuffer通過source元素來指定多種檔案格式 poster屬性顯示例項影象 text name aaa id aaa list id value a1 value a2 val...