言
我們都知道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的幾個算法,大家學會了嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。