Web Storage

2022-01-17 08:50:13 字數 4254 閱讀 1362

web儲存最初作為html5的一部分被定義成api形式,但是後來被剝離出來作為獨立的一份標準了。web儲存標準所描述的api包含localstorage物件和sessionstorage物件,這兩個物件實際上是持久化關聯陣列,是名值對的對映表,“名”和“值”都是字串。web儲存易於使用、支援大容量(但非無限量)資料儲存同時相容當前所有主流瀏覽器。本文將詳細介紹web storage

web storage的目的是克服由cookie帶來的一些限制,當資料需要被嚴格控制在客戶端上時,無須持續地將資料發回伺服器。web storage的兩個主要目標是:提供一種在cookie之外儲存會話資料的途徑以及提供一種儲存大量可以跨會話存在的資料的機制

web storage分成兩類:sessionstorage和localstorage。sessionstorage儲存的資料用於瀏覽器的一次會話,當會話結束(通常是該視窗關閉),資料被清空;localstorage儲存的資料長期存在,下一次訪問該**的時候,網頁可以直接讀取以前儲存的資料。除了儲存期限的長短不同,這兩個物件的屬性和方法完全一樣

它們很像cookie機制的強化版,能夠動用大得多的儲存空間。目前,每個域名的儲存上限視瀏覽器而定,chrome是2.5mb,firefox和opera是5mb,ie是10mb。其中,firefox的儲存空間由一級域名決定,而其他瀏覽器沒有這個限制。也就是說,在firefox中,a.example.com和b.example.com共享5mb的儲存空間。另外,與cookie一樣,它們也受同域限制。某個網頁存入的資料,只有同域下的網頁才能讀取

通過檢查window物件是否包含sessionstorage和localstorage屬性,可以確定瀏覽器是否支援這兩個物件

[注意]ie瀏覽器不支援在本地使用storage

sessionstorage和localstorage儲存的資料,都以“鍵對”的形式存在。也就是說,每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存

[注意]storage型別只能儲存字串。非字串的資料在儲存之前會被轉換成字串

【setitem()】

存入資料使用setitem方法。它接受兩個引數,第一個是鍵名,第二個是儲存的資料

[注意]不同的瀏覽器存入的storage位置不一樣,不能通用

sessionstorage.setitem("key","value");

localstorage.setitem("key","value");

【getitem()】

讀取資料使用getitem方法。它只有一個引數,就是鍵名

var valuesession = sessionstorage.getitem("key");

var valuelocal = localstorage.getitem("key");

除了使用setitem()和getitem()方法之外,還可以使用屬性來存取資料

localstorage.setitem("key1","value1");

localstorage.testkey = 'testvalue';

console.log(localstorage.getitem('testkey'));//

'testvalue'

console.log(localstorage.key1);//

'value1'

【removeitem()】

removeitem()方法用於清除某個鍵名對應的資料

[注意]清除不存在的鍵名不會報錯,只會靜默失敗

sessionstorage.removeitem('key');

localstorage.removeitem('key');

除了使用removeitem()方法,還可以使用delete操作來清除資料

[注意]ie7-瀏覽器不支援delete操作符來清除storage資料

localstorage.setitem("key1","value1");

delete

localstorage.key1;

console.log(localstorage.key1);

//undefined

console.log(localstorage.getitem('key1'));//

null

【clear()】

clear方法用於清除所有儲存的資料

sessionstorage.clear();

localstorage.clear();

【key()】

key(index)方法返回index位置處的值的名字

sessionstorage.setitem("key1","value1");

sessionstorage.setitem("key2","value2");

console.log(sessionstorage.key(0));//

'key1'

console.log(sessionstorage.key(1));//

'key2'

console.log(sessionstorage.key(2));//

null

【length】

length屬性返回名值對兒的個數

console.log(sessionstorage.length);//

2

利用length屬性和key()方法,可以遍歷所有的鍵

for(var i = 0; i < localstorage.length; i++)

還可以使用for-in迴圈來迭代

for(var key in

localstorage)

首先,要特別注意的是,該事件只發生在window物件上,在document物件上觸發無效,且使用dom0級、dom2級事件處理函式都可以

無論對sessionstorage還是localstorage進行操作,都會觸發storage事件。當通過屬性或setitem()方法儲存資料,使用delete操作符或removeitem()刪除資料,或者呼叫clear()方法時,都會發生該事件

[注意]只有當儲存資料真正發生改變的時候才會觸發儲存事件。像給已經存在的儲存項設定一個一模一樣的值,抑或是刪除一個本來就不存在的儲存項都是不會觸發儲存事件的。通過getitem()方法獲取資料也不會觸發該事件

一般地,storage事件不在導致資料變化的當前頁面觸發。如果瀏覽器同時開啟一個域名下面的多個頁面,當其中的一個頁面改變sessionstorage或localstorage的資料時,其他所有頁面的storage事件會被觸發,而原始頁面並不觸發storage事件。可以通過這種機制,實現多個視窗之間的通訊

[注意]ie8-瀏覽器不支援storage事件,ie9+瀏覽器與其他標準瀏覽器有所不同,無論資料真實值是否變化,只要對資料進行設定或刪除,都會觸發該事件,且原始頁面和同一域名下的其他頁面都會觸發

這個事件的event物件有以下屬性

url:觸發事件的連結地址

key:設定或者刪除的鍵名

newvalue:如果是設定值,則是新值;如果是刪除鍵,則是null

oldvalue:鍵被更改之前的值

storagearea:返回觸發事件的物件

<

div>改變輸入框中的值,再點選按鈕,會觸發storage事件

div>

<

button

id="btn"

>按鈕

button

>

<

input

type

="text"

id="test"

>

<

div

id="result"

>

div>

<

script

>

btn.onclick

=function

()window.onstorage

=function

(e)script

>

<

div

id="result"

>

div>

<

script

>

window.onstorage

=function

(e)script

>

原始頁面:

其他頁面:

web安全

從瀏覽器的角度來看,網頁只是一個長字串。瀏覽器會按順序處理這個字串,在此過程中,會顯示某些字元,同時按特殊規則解釋其他字元 如和 。如果惡意...

從客戶端瀏覽器直傳檔案到Storage

關於上傳檔案到azure storage沒有什麼可講的,不論我們使用哪種平臺 語言,上傳流程都如下圖所示 從上圖我們可以瞭解到從客戶端上傳檔...

web基礎

目錄2 動態web 3 web伺服器 4 tomcat 5 http 5 4 http響應 htm, html都是網頁的字尾,如果伺服器上一...