html5中的web儲存

2022-02-24 08:50:42 字數 1812 閱讀 8093

html5中的web儲存就是sessionstorage和localstorage,使用非常非常簡單

localstorage.fry_videojs_playbackrate=this.playbackrate();sessionstorage:【關閉瀏覽器視窗】:容量大小約為5m左右,該方式的生命週期為關閉瀏覽器視窗為止

localstorage:【不刪除不過期】:容量大小約為20m左右, 儲存的資料不會隨著使用者瀏覽時會話過期而過期,但會應使用者的請求而刪除。【只能儲存字串】:如果是json物件的話,可以將物件json.stringify() 編碼後儲存**或參考:html5的web儲存詳解

以前我們在本地儲存資料都是用document.cookie來儲存的,但是由於其的儲存大小只有4k左右,解析也很複雜,給開發帶來了諸多的不便.不過現在html5出了web的儲存,彌補了cookie的不足,而且開放起來也是相當的方便

web儲存分兩類

sessionstorage

容量大小約為5m左右,該方式的生命週期為關閉瀏覽器視窗為止

localstorage

容量大小約為20m左右, 儲存的資料不會隨著使用者瀏覽時會話過期而過期,但會應使用者的請求而刪除。瀏覽器也因為儲存空間的限制或安全原因刪除它們.而且型別儲存的資料可以同乙個瀏覽器的多個視窗共享

注意點:只能儲存字串,如果是json物件的話,可以將物件json.stringify() 編碼後儲存

方法詳解:

setitem(key, value) 設定儲存內容

getitem(key) 讀取儲存內容

removeitem(key) 刪除鍵值為

key的儲存內容

clear() 清空所有儲存內容

下面我們就給個給大家看一下他的寫法:

//

更新function

update()

//獲取

function

get()

//刪除

function

remove()

//清空所有資料

function

clear()

檢視效果的話,我們以谷歌瀏覽器為例子:

儲存完資料後的

下面我就給大家展示記錄使用者名稱和密碼的經典例子

當記住密碼的核取方塊勾上的時候,下次開啟的時候,使用者名稱和密碼就不需要在重新輸入了

html部分:

使用者名稱:

密 碼:

記住密碼

登入js部分

var username=document.queryselector('.username');

var pwd=document.queryselector('.pwd');

var sub=document.queryselector('button');

var ckb=document.queryselector('.ckb');

sub.onclick=function

()else

//否則清除使用者資訊

} window.onload=function

()

html5中web儲存方式

瀏覽器 客戶端 訪問伺服器端的時候,攜帶的資料,之前這些資料儲存在cookie中,但是cookie儲存的資料大小有限 html5的web儲存分為 localstorage儲存 sessionstorage儲存 他們的區別在於 localstorage 儲存在客戶端,大小沒有限制,時間也沒有限制 se...

HTML5 中Web儲存問題

html5 web 儲存,乙個比cookie更好的本地儲存方式。注意 internet explorer 7 及更早ie版本不支援web 儲存.使用html5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是 cookie。但是web 儲存需要更加的安全與快速.這些資料不會被儲存在伺服器上,...

HTML5的Web儲存應用

一 介紹 html5 web儲存,乙個比cookie更好的本地儲存方式。1 什麼是html5 web儲存 使用html5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是cookie。但是web儲存需要更加的安全與快速,這些資料不會被儲存在伺服器上,但是這些資料只用於使用者請求 資料上,它也...