13 HTML5本地儲存

2021-08-20 20:00:17 字數 1616 閱讀 3878

cookie 儲存頁面上的使用者名稱、密碼、記錄時間等

cookie特性:

-同乙個**中的所有頁面共享一套cookie(如:ie上儲存了,google上沒儲存)

-數量、大小有限(大小4kb)

-過期時間(儲存時間可以自己設定

-cookie是隨http事務一起被傳送給伺服器

本地儲存

本地儲存(web storage),就是在web上儲存資料,而這裡的儲存時針對客戶端本地而言的

web storage分為兩類:

sessionstorage

localstorage

本地儲存特點:

-儲存量限制(5m)

-客戶端完成,不會請求伺服器處理

-sessionstorage 資料時不共享、localstorage共享

sessionstorage

session臨時回話,從頁面開啟到頁面關閉的時間段

視窗的臨時儲存、頁面關閉,本地儲存消失

localstorage

永久儲存(可以手動刪除資料)

web storage本地儲存的常用方法

setitem() 設定資料,key\value型別,型別都是字串

getitem()獲取資料,通過 key來獲取到相應的value

removeitem()刪除資料,通過key來刪除相應的value

value="儲存資料"/>

type="button"

value="獲取資料"/>

type="button"

value="刪除資料"/>

body>

html>

//獲取所有input元素

var inputs=document.getelementsbytagname("input");

inputs[1].onclick=function

() inputs[2].onclick=function

() inputs[3].onclick=function

()script>

效果圖:

html5 html5 本地儲存

最近一直在學習 html5,為了後期的移動專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以 localstorage 為例。早期我們都是使用 c...

html5 html5 本地儲存

最近一直在學習 html5,為了後期的移動專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以 localstorage 為例。早期我們都是使用 c...

html5 html5 本地儲存

最近一直在學習 html5,為了後期的移動專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以 localstorage 為例。早期我們都是使用 c...