前言

我們都知道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的幾個算法，大家學會了嗎？