言

我們都知道localStorage與sessionStorage是用于本地存儲的，那么我們該如何獲取本地存儲的大小呢？

如何監聽storage事件，并作出后續處理呢？

今天這篇我們就一起來看看吧，文中的算法代碼，已經放到了github上了，感興趣的同學可以自取。

https://github.com/zhouxiongking/article-pages/tree/master/articles/H5Storage

HTML5

獲取本地最大存儲上限

localStorage與sessionStorage是一樣的，我們就以localStorage為例進行代碼編寫。

主要思想：在localStorage中存儲的信息都是{key: value}的字符串形式，所以只要我們通過setItem方法不停的加存儲值的長度，直到拋出異常為止，我們就可以在catch中獲取到本地存儲的最大值。

通過以上的思想，我們可以得到以下的代碼。

獲取本地最大存儲的方法

我們可以直接將上述代碼復制到控制臺的console欄下運行，就可以得到瀏覽器的本地最大存儲的大小。

以下是在Chrome瀏覽器下的運行結果，從中可以看出Chrome瀏覽器的本地最大存儲大小為5.12M。

Chrome瀏覽器下

以下是在Safari瀏覽器下的運行結果，從中可以看出Safari瀏覽器的本地存儲大小為2.56M。

Safari瀏覽器下

從實際的運行結果可以看出不同的瀏覽器的本地存儲localStorage大小是不同的。

如果想看看其他的瀏覽器的localStorage最大值，可以直接運行上述代碼。

獲取localStorage的剩余容量

有的時候我們在使用localStorage存放數據時，需要知道當前還剩余多少容量，該怎么辦呢？

主要思想：我們同樣用到localStorage中存放值是{key: value}字符串的原理。

• 先通過上一節中的方法獲取localStorage存儲的最大值

• 在for...in循環中，通過getItem方法獲取所有已經使用的存儲，然后累加起來

• 最大值減去已經使用的存儲空間，即可獲取剩余的容量

通過以上的思想，我們可以得到以下的代碼。

獲取剩余容量

通過上述的代碼我們就可以獲取localStorage的剩余容量了。

storage事件

當localStorage或者sessionStorage中存儲的值發生變化時，就會觸發storage事件。

類似于click事件一樣，localStorage與sessionStorage也可以觸發storage事件，其定義的方式也是一樣，可以通過addEventListener來實現。

但是需要注意的是：在默認情況下storage事件的觸發是發生在同源下的不同頁面中的。

上面這句話的意思是，如果我們在一個頁面修改localStorage中存儲的值，然后在同一個頁面設置storage事件，這樣是無效的。

當然我們可以修改默認的storage事件，改為自定義的方式，這個放在下節來講。

為了印證上述的觀點，我們使用兩個頁面，在頁面A中通過localStorage給變量name設置初始值kingx，并且設置監聽storage事件，然后在頁面B中改變變量name的值為kingx2，最后來看看是否觸發了頁面A的storage事件。

頁面A的代碼如下。

頁面A

頁面B的代碼如下。

頁面B

當我們運行了頁面A和頁面B后，然后在頁面B點擊change按鈕，修改name的值，然后回到頁面A去查看console控制臺，會發現有以下的結果。

測試結果

通過上述結果可以看出觀點的正確性。

自定義storage事件

如果我們想要在當前頁面監聽修改localStorage值的事件，該如何實現呢？

可以通過自定義storage事件來實現。storage事件實際是在調用setItem時觸發，因此我們只需要自定義setItem方法即可。

同一個頁面下，在自定義的setItem方法中，自定義一個事件，然后使用window監聽這個自定義事件。

得到的代碼如下。

自定義storage事件

我們可以通過以下的代碼來進行驗證。

測試代碼

運行的結果和上一節的結果是一樣的。

結束語

本篇文章中主要介紹了與localStorage的幾個算法，大家學會了嗎？

essionStorage 是HTML5新增的一個會話存儲對象，用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。本篇主要介紹 sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。

說明：

sessionStorage 是HTML5新增的一個會話存儲對象，用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 調用此對象。

適用場景：

sessionStorage 非常適合SPA(單頁應用程序)，可以方便在各業務模塊進行傳值。

其實：

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage：關閉頁面就會銷毀存儲的數據

localStorage：用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

-------下面我們來看看他有哪些屬性和方法-------

屬性：

readonly int sessionStorage.length //返回一個整數，表示存儲在 sessionStorage 對象中的數據項(鍵值對)數量。

方法：

string sessionStorage.key(int index) //返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。

string sessionStorage.getItem(string key) //返回鍵名(key)對應的值(value)。若沒有返回null。

void sessionStorage.setItem(string key, string value) //該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。

void sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。

void sessionStorage.clear() //清除 sessionStorage 對象所有的項。

-------示例-------

存儲數據

//采用setItem()方法存儲

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

//通過屬性方式存儲

sessionStorage['testKey']='這是一個測試的value值';

讀取數據

//通過getItem()方法取值

sessionStorage.getItem('testKey'); //=> 返回testKey對應的值

//通過屬性方式取值

sessionStorage['testKey']; //=> 這是一個測試的value值

它也可以存儲對象（sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換為文本格式；讀取時，通過JSON.parse()將文本轉換回對象。）

var userEntity={

name: 'tom',

age: 22

};

// 存儲值：將對象轉換為Json字符串

sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值時：把獲取到的Json字符串轉換回對象

var userJsonStr=sessionStorage.getItem('user');

userEntity=JSON.parse(userJsonStr);

console.log(userEntity.name);

數組：

var arra=[1,2,3,4];

localStorage.setItem('key',JSON.stringify(arra));

var read=JSON.parse(localStorage.getItem('key'));

console.log(read,read.length);

注意：　

1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基于同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)

2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。

3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器，只會在本地生效，并在關閉標簽頁后清除數據。(若使用Chrome的恢復標簽頁功能，seesionStorage的數據也會恢復)。

4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉換為字符串。true值會轉換為"true")。

5) 存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。

瀏覽器版本支持：

支持sessionStorage的瀏覽器最小版本：IE8、Chrome 5。

再來個小demo:

樣式：

1 #container { 2 border: 2px solid gray; 3 width: 320px; 4 text-align:center; 5 }

html:

 1 <div id="container">
 2 <br>
 3 <label for="username">姓名：</label>
 4 <input type="text" id="username" name="username">
 5 <br>
 6 <label for="mobilephone">手機：</label>
 7 <input type="text" id="mobilephone" name="mobilephone">
 8 <br><br>
 9 <input type="button" onclick="add()" id="add" value="增加聯系人">
10 <br><br>
11 <hr>
12 <label for="search">輸入姓名：</label>
13 <input type="text" id="search" name="search">
14 <br><br>
15 <input type="button" onclick="find()" id="find" value="查找手機號">
16 <p id="result"><br></p>
17 </div>

js:

言

我們都知道localStorage與sessionStorage是用于本地存儲的，那么我們該如何獲取本地存儲的大小呢？

如何監聽storage事件，并作出后續處理呢？

今天這篇我們就一起來看看吧，文中的算法代碼，已經放到了github上了，感興趣的同學可以自取。

https://github.com/zhouxiongking/article-pages/tree/master/articles/H5Storage

HTML5

獲取本地最大存儲上限

localStorage與sessionStorage是一樣的，我們就以localStorage為例進行代碼編寫。

主要思想：在localStorage中存儲的信息都是{key: value}的字符串形式，所以只要我們通過setItem方法不停的加存儲值的長度，直到拋出異常為止，我們就可以在catch中獲取到本地存儲的最大值。

通過以上的思想，我們可以得到以下的代碼。

獲取本地最大存儲的方法

我們可以直接將上述代碼復制到控制臺的console欄下運行，就可以得到瀏覽器的本地最大存儲的大小。

以下是在Chrome瀏覽器下的運行結果，從中可以看出Chrome瀏覽器的本地最大存儲大小為5.12M。

Chrome瀏覽器下

以下是在Safari瀏覽器下的運行結果，從中可以看出Safari瀏覽器的本地存儲大小為2.56M。

Safari瀏覽器下

從實際的運行結果可以看出不同的瀏覽器的本地存儲localStorage大小是不同的。

如果想看看其他的瀏覽器的localStorage最大值，可以直接運行上述代碼。

獲取localStorage的剩余容量

有的時候我們在使用localStorage存放數據時，需要知道當前還剩余多少容量，該怎么辦呢？

主要思想：我們同樣用到localStorage中存放值是{key: value}字符串的原理。

• 先通過上一節中的方法獲取localStorage存儲的最大值

• 在for...in循環中，通過getItem方法獲取所有已經使用的存儲，然后累加起來

• 最大值減去已經使用的存儲空間，即可獲取剩余的容量

通過以上的思想，我們可以得到以下的代碼。

獲取剩余容量

通過上述的代碼我們就可以獲取localStorage的剩余容量了。

storage事件

當localStorage或者sessionStorage中存儲的值發生變化時，就會觸發storage事件。

類似于click事件一樣，localStorage與sessionStorage也可以觸發storage事件，其定義的方式也是一樣，可以通過addEventListener來實現。

但是需要注意的是：在默認情況下storage事件的觸發是發生在同源下的不同頁面中的。

上面這句話的意思是，如果我們在一個頁面修改localStorage中存儲的值，然后在同一個頁面設置storage事件，這樣是無效的。

當然我們可以修改默認的storage事件，改為自定義的方式，這個放在下節來講。

為了印證上述的觀點，我們使用兩個頁面，在頁面A中通過localStorage給變量name設置初始值kingx，并且設置監聽storage事件，然后在頁面B中改變變量name的值為kingx2，最后來看看是否觸發了頁面A的storage事件。

頁面A的代碼如下。

頁面A

頁面B的代碼如下。

頁面B

當我們運行了頁面A和頁面B后，然后在頁面B點擊change按鈕，修改name的值，然后回到頁面A去查看console控制臺，會發現有以下的結果。

測試結果

通過上述結果可以看出觀點的正確性。

自定義storage事件

如果我們想要在當前頁面監聽修改localStorage值的事件，該如何實現呢？

可以通過自定義storage事件來實現。storage事件實際是在調用setItem時觸發，因此我們只需要自定義setItem方法即可。

同一個頁面下，在自定義的setItem方法中，自定義一個事件，然后使用window監聽這個自定義事件。

得到的代碼如下。

自定義storage事件

我們可以通過以下的代碼來進行驗證。

測試代碼

運行的結果和上一節的結果是一樣的。

結束語

本篇文章中主要介紹了與localStorage的幾個算法，大家學會了嗎？