webstorage html5的本地資料處理

2022-03-20 19:01:34 字數 3328 閱讀 5349

1.webstorage是什麼?

webstorage是html5中用於本地化儲存的一種方式,而在之前呢我們是用cookie的儲存方式處理;

2.那它們之間的區別是什麼?

ⅰ.cookie存在的問題:

ⅰ.cookie需要向服務端傳送乙個請求,服務端返回乙個cookieid,儲存用瀏覽器快取裡,需消耗一定的頻寬。[cookie會隨著每次http請求頭資訊一起傳送,無形中增加了網路流量];

ⅱ.cookie儲存的資料容量有限,根據瀏覽器型別不同而不同,ie6大約只能儲存2k;

ⅱ.而webstorage只需把資料儲存於本地;

3.我們可以舉乙個小例子說明一下

eg:輸入使用者名稱和密碼,點選按鈕1時,把資料儲存起來,點選按鈕2,頁面重新整理還可以獲取到;

過程:ⅰ.建立乙個事件

function myclick1()

ⅱ.通過乙個id獲取到它的使用者名稱

var username = $("

#txtusername

").val();

ⅲ.通過乙個id獲取到它的密碼

var pwd = $("

#txtpwd

").val();

ⅳ.使用者名稱和密碼獲取到之後,我們要怎麼存資料呢?有兩種方式:

①. 第一種:sessionstorege,使用於firefox2+的火狐瀏覽器;

生命週期:用這種方式儲存的資料僅視窗級別有效,同乙個視窗(或者tab)頁面重新整理或者跳轉,都能獲取到本地儲存的資料,當新開視窗或者頁面時,原來的資料就失效了[僅限當前頁面]

缺點:ie不支援,不能實現資料的持久儲存。

sessionstorage.setitem("

k_username

", username);

sessionstorage.setitem("k_pwd", pwd);

注:sessionstorage.setitem是通過鍵值對的方式儲存;

②.第二種方式:localstorage

localstorage是web storage網際網路儲存規範中的一部分,現在在firefox 3.5、safari 4和ie8中得到支援。

生命週期:存於本地c盤,瀏覽器關閉開啟之後還有;

缺點:低版本瀏覽器不支援。

localstorage.setitem("

k_username

", username);

localstorage.setitem(

"k_pwd

",pwd);

ⅴ.列印

alert("

儲存成功!

");

ⅵ.按鈕2列印以上所有資料

第一種方式列印:

function myclick2()
第二種方式列印:

function myclick2()
結果顯示:

ⅶ.擴充套件:localstorage的removeitem方法

//

如果我想刪除它的使用者名稱怎麼做呢?通過它的key把它刪除,這樣獲取時就為空

"k_username");

跟蹤本地資料情況:

結果顯示:

ⅷ.localstorage的clear方法

//

如果我想把所有資料都清除?localstorage有個方法

localstorage.clear();

結果顯示:

**顯示:

12"

">

33839

4041

使用者名稱:

4243

"text

" id="

txtusername

" />

4445

4647

密碼:4849"

password

" id="

txtpwd

" />

5051

525354"

button

" value="

按鈕1" onclick="

myclick1()

"/>

555657"

button

" value="

按鈕2" onclick="

myclick2()

"/>

585960

6162

**顯示

12"

">

33132

333435"

2">

3637

383940"

button

" value="

" onclick="

preservationclick()

" />41"

button

" value="

清除" onclick="

clearclick()

" />

424344"

showcon

">

4546

47

效果顯示:

5 第 5 章 迴圈

1.可以用迴圈來驗證輸入。在迴圈前的第一次讀取操作,稱為啟動讀取,如果後續還需要繼續讀取,則語句應該在迴圈中。2.在實際程式設計應用中,不建議在 cout 語句中放置遞增或遞減運算子 因為容易出錯 3.需要計數時使用計數器,需要累計彙總時使用累加器。4.標記符號是乙個特殊值,指示著值列表的結尾。一般...

5X5矩陣調換!

將乙個5x5矩陣中最大的元素放在中心,4個角分別放4個最小的元素,寫一函式實現之!include int main printf n return 0 void change int p temp p 12 p 12 pmax pmax temp temp p p pmin pmin temp pm...

工作5年5個月

2005年玩 冒險島 認識了一群朋友,現在都2014年了。那個時候還一起打怪公升級,亞洲服,新加坡服,歐服,後來出現了 傳奇 和其他遊戲的私服。當時就想能出乙個私服才玩的過癮。那個時候流行網路遊戲,讀大學時候選專業就選了遊戲專業。到現在發展很快,頁遊,手遊。本來那時候開始選電子商務的,因為耍遊戲所以...