《HTML5移動web開發指南》——筆記3(本地儲存)
阿新 • • 發佈:2019-01-23
HTML5本地儲存規範中,定義兩個API
1)Web Storage
2)本地資料庫 Web SQL Database
以下主要介紹Web Storage:
Web Storage的作用是在網站中把有用的資訊儲存到本地的計算機或者移動裝置上,根據實際需求從本地獲取資訊。
Web Storage提供兩種儲存型別API介面:sessionStorage和localStorage。(sessionStorage在會話期間有效,localStorage永久儲存在本地)
(注:大部分遊覽器目前都是這種特性)
程式碼嚴謹性:使用之前檢查遊覽器是否支援Web Storage
if(window.localStorage){ } if(window.sessionStorage){ }
程式碼安全性:localStorage是域內安全的。(但各個遊覽器之間的資料是獨立的)
localStorage屬性:length
localStorage方法:setItem和getItem方法——賦值和取值
removeItem方法刪除一個key/value對
clear方法刪除所有的鍵值對
localStorage.setItem("name","啦啦啦"); localStorage.getItem("name"); //如果localStorage儲存列表中只存在一個item,可以通過index去讀取name值 localStorage.key(1); //刪除指定key為“name”的item localStorage.removeItem("name"); //刪除localStorage所有key/value鍵值對items localStorage.clear();
Storage 事件監聽
HTML5 Web Storage API 內建的事件監聽器能對資料進行監聽。
Storage事件的藉口程式碼如下所示:
interface StorageEvent:Event { readonly attribute DOMString key; readonly attribute DOMString? oldValue; readonly attribute DOMString? newValue; readonly attribute DOMString url; readonly attribute Storage?storageArea; void initStrageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in Storage storageAreaArg); };
- key屬性表示儲存中的鍵名
- oldValue屬性:資料更新前的鍵值(如果資料是新新增的,該值為null)
- newValue屬性:資料更新後的值(如果資料通過removeItem刪除,該值為null)
若呼叫clear方法,則key、oldValue和oldValue的值都是null
- url屬性:記錄Storage時間發生時的源地址
- StorageArea屬性指向事件監聽對應的Storage對像