JS代碼計算LocalStorage容量示例詳解

第JS代碼計算LocalStorage容量示例詳解目錄LocalStorage容量計算總?cè)萘恳咽褂萌萘渴Ｓ嗫捎萌萘?/p>

LocalStorage容量

localStorage的容量大家都知道是5M，但是卻很少人知道怎么去驗證，而且某些場景需要計算localStorage的剩余容量時，就需要我們掌握計算容量的技能了~~

計算總?cè)萘?/p>

我們以10KB一個單位，也就是10240B，1024B就是10240個字節(jié)的大小，我們不斷往localStorage中累加存入10KB，等到超出最大存儲時，會報錯，那個時候統(tǒng)計出所有累積的大小，就是總存儲量了！

注意：計算前需要先清空LocalStorage

letstr='0123456789'

lettemp=''

//先做一個10KB的字符串

while(str.length!==10240){

str=str+'0123456789'

//先清空

localStorage.clear()

constcomputedTotal=()={

returnnewPromise((resolve)={

//不斷往LocalStorage中累積存儲10KB

consttimer=setInterval(()={

try{

localStorage.setItem('temp',temp)

}catch{

//報錯說明超出最大存儲

resolve(temp.length/1024-10)

clearInterval(timer)

//統(tǒng)計完記得清空

localStorage.clear()

temp+=str

},0)

(async()={

consttotal=awaitcomputedTotal()

console.log(`最大容量${total}KB`)

最后得出的最大存儲量為5120KB5M

已使用容量

計算已使用容量，我們只需要遍歷localStorage身上的存儲屬性，并計算每一個的length，累加起來就是已使用的容量了~~~

constcomputedUse=()={

letcache=0

for(letkeyinlocalStorage){

if(localStorage.hasOwnProperty(key)){

cache+=localStorage.getItem(key).length

return(cache/1024).toFixed(2)

(async()={

consttotal=awaitcomputedTotal()

leto='0123456789'

for(leti=0;i1000;i++){

o+='0123456789'

localStorage.setItem('o',o)

constuseCache=computedUse()

console.log(`已用${useCache}KB`)

可以查看已用容量

剩余可用容量

我們已經(jīng)計算出總?cè)萘亢鸵咽褂萌萘?，那么剩余可用容?總?cè)萘?已使用容量

constcomputedsurplus=(total,use)={

returntotal-use

(async()={

consttotal=awaitcomputedTotal()

leto='0123456789'

for(leti=0;i1000;i++){

o+='0123456789'

localStorage.setItem('o',o)

constuseCache=computedUse()

console.log(`剩余可用容量${computedsurplus(total,useCache)}KB`)