localstorage顧名思義,就是本地儲存的意思,在以前很長一段時間,要想在客戶端存
儲一些配置及登入資訊等資料都只能通過cookie或flash的方式,如今html5來臨,也
帶來了更強大的本地儲存,最多可儲存大小5m的字串,足可以滿足大部分的web應
用,比cookie的4k要大出不少,還有乙個sessionstorage,功能基本與localstorage
相同,看名字便知與sesstion一樣,關閉瀏覽器即失效。
以前有用過cookie的都了解cookie的儲存讀取方式都不太優雅,需要自己封裝set get方
法,而localstorage則方便許多,localstorage 是作為window的乙個屬性存在的,擁
有setitem,getitem,removeitem,clear等方法,相當方便。
瀏覽器的支援除了ie7及以下不支援外,其他標準瀏覽器都完全支援(ie及ff需在web服
務器裡執行),支援情況如下圖:
如下**即可判斷瀏覽器是否支援
if(window.localstorage)elselocalstorage不但可以用自身的setitem,getitem等方便訪問,也可以像普通物件一樣
用點操作符,及的方式進行資料儲存,像如下的例
var storage = window.localstorage;另外,localstorage還提供了乙個key()方法,配合localstorage的length屬性,可以storage.a = "haha";
storage["b"] = "hehe";
var a = storage.a;
var b = storage["b"];
在不知道有哪些鍵值的時候使用,如下:
var storage = window.localstorage;對於事件變數e,是乙個storageevent物件,提供了一些實用的屬性,可以很好的觀察function showstorage()else if(window.attachevent)
function handle_storage(e)
//showstorage();
}
鍵值對的變化,如下表:
property
type
description
keystring
the named key that was added, removed, or moddified
oldvalue
anythe previous value(now overwritten), or null if a new item was added
newvalue
anythe new value, or null if an item was added
url/uri
string
the page that called the method that triggered this change
寫乙個最簡單的,利用本地儲存的計數器,有乙個需要注意的地方是不管setitem裡傳什
麼型別,最終都會被轉成string,所以getitem的時候需要轉型別:
HTML5的本地儲存
html5的本地儲存分為永久性的本地儲存和會話性的本地儲存。會話性本地儲存sessionstorage 儲存在sessionstorage中的資料首先是key value形式的,另外就是它跟瀏覽器當前會話相關,當會話結束後,資料會自動清除,跟未設定過期時間的cookie類似。setitem key,...
HTML5之本地儲存
html5之本地儲存 l cookie 資料儲存到計算機中,通過瀏覽器控制新增與刪除資料 l cookie的特點 儲存限制 網域名稱100個cookie,每組值大小4kb 客戶端 伺服器端,都會請求伺服器 頭資訊 本地儲存也會請求伺服器 頁面間的cookie是共享 l storage session...
HTML5之本地儲存
html5本地儲存有localstorage和sessionstorage,兩者的區別就是localstorage一直儲存在本地不會過期,而sessionstorage視窗一旦關閉就沒了。兩者用法是一樣的。if window.localstorage else儲存操作如下 通過鍵值對應,只能儲存字串...