前言

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

如何監(jiān)聽storage事件，并作出后續(xù)處理呢？

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

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

HTML5

獲取本地最大存儲上限

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

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

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

獲取本地最大存儲的方法

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

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

Chrome瀏覽器下

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

Safari瀏覽器下

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

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

獲取localStorage的剩余容量

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

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

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

• 在for...in循環(huán)中，通過getItem方法獲取所有已經(jīng)使用的存儲，然后累加起來

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

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

獲取剩余容量

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

storage事件

當(dāng)localStorage或者sessionStorage中存儲的值發(fā)生變化時，就會觸發(fā)storage事件。

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

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

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

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

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

頁面A的代碼如下。

頁面A

頁面B的代碼如下。

頁面B

當(dāng)我們運行了頁面A和頁面B后，然后在頁面B點擊change按鈕，修改name的值，然后回到頁面A去查看console控制臺，會發(fā)現(xiàn)有以下的結(jié)果。

測試結(jié)果

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

自定義storage事件

如果我們想要在當(dāng)前頁面監(jiān)聽修改localStorage值的事件，該如何實現(xiàn)呢？

可以通過自定義storage事件來實現(xiàn)。storage事件實際是在調(diào)用setItem時觸發(fā)，因此我們只需要自定義setItem方法即可。

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

得到的代碼如下。

自定義storage事件

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

測試代碼

運行的結(jié)果和上一節(jié)的結(jié)果是一樣的。

結(jié)束語

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