一、如何獲取localStorage的剩余容量
在H5大行其道的今天，localStorage(本地存儲)對每一個前斷攻城師來說都不太陌生。同時localStorage也給我們帶來了極大的便利，不用於cookies的小家子氣，localStorage的存儲量還是很客觀的。
由於瀏覽器的差異性，導致我們需要對localStorage中的內容做出一部分取舍。而根據目前的市場上瀏覽器對loaclStorage的兼容性來看，最佳的大小是2.5M左右。如何得到localStorage的容量大小，大概接觸過localStorage都會遇到的這么一個問題。
localStorage 中存儲的是字符串，根據這一條件，我們可以通過取出所有的localStorage的內容，而其長度就是大小。具體代碼如下:
1 (function(){
2 if(!window.localStorage) { 3 console.log('瀏覽器不支持localStorage'); 4 } 5 var size = 0; 6 for(item in window.localStorage) { 7 if(window.localStorage.hasOwnProperty(item)) { 8 size += window.localStorage.getItem(item).length; 9 } 10 } 11 console.log('當前localStorage剩余容量為' + (size / 1024).toFixed(2) + 'KB'); 12 })()
二、如何獲取localStorage最大容量
通過上面的分析，其實思路基本是一樣的，都是通過字符長度來判斷。
1 (function() {
2 if(!window.localStorage) { 3 console.log('當前瀏覽器不支持localStorage!') 4 } var test = '0123456789'; 5 var add = function(num) { 6 num += num; 7 if(num.length == 10240) { 8 test = num; 9 return; 10 } 11 add(num); 12 } 13 add(test); 14 var sum = test; 15 var show = setInterval(function(){ 16 sum += test; 17 try { 18 window.localStorage.removeItem('test'); 19 window.localStorage.setItem('test', sum); 20 console.log(sum.length / 1024 + 'KB'); 21 } catch(e) { 22 console.log(sum.length / 1024 + 'KB超出最大限制'); 23 clearInterval(show); 24 } 25 }, 0.1) 26 })()
自己寫了一個檢測瀏覽器localStorage的最大容量的頁面，麻雀雖小，但五臟俱全 :lol:。