HTML5的本地儲存 LocalStorage

2022-08-28 09:45:08 字數 1758 閱讀 9081

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)else
localstorage不但可以用自身的setitem,getitem等方便訪問,也可以像普通物件一樣

用點操作符,及的方式進行資料儲存,像如下的例

var storage = window.localstorage;

storage.a = "haha";

storage["b"] = "hehe";

var a = storage.a;

var b = storage["b"];

另外,localstorage還提供了乙個key()方法,配合localstorage的length屬性,可以

在不知道有哪些鍵值的時候使用,如下:

var storage = window.localstorage;

function showstorage()else if(window.attachevent)

function handle_storage(e)

//showstorage();

}

對於事件變數e,是乙個storageevent物件,提供了一些實用的屬性,可以很好的觀察

鍵值對的變化,如下表:

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儲存操作如下 通過鍵值對應,只能儲存字串...