思維導圖
本地儲存( 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...