JS代碼計(jì)算LocalStorage容量示例詳解

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

LocalStorage容量

localStorage的容量大家都知道是5M，但是卻很少人知道怎么去驗(yàn)證，而且某些場(chǎng)景需要計(jì)算localStorage的剩余容量時(shí)，就需要我們掌握計(jì)算容量的技能了~~

計(jì)算總?cè)萘?/p>

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

注意：計(jì)算前需要先清空LocalStorage

letstr='0123456789'

lettemp=''

//先做一個(gè)10KB的字符串

while(str.length!==10240){

str=str+'0123456789'

//先清空

localStorage.clear()

constcomputedTotal=()={

returnnewPromise((resolve)={

//不斷往LocalStorage中累積存儲(chǔ)10KB

consttimer=setInterval(()={

try{

localStorage.setItem('temp',temp)

}catch{

//報(bào)錯(cuò)說(shuō)明超出最大存儲(chǔ)

resolve(temp.length/1024-10)

clearInterval(timer)

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

localStorage.clear()

temp+=str

},0)

(async()={

consttotal=awaitcomputedTotal()

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

最后得出的最大存儲(chǔ)量為5120KB5M

已使用容量

計(jì)算已使用容量，我們只需要遍歷localStorage身上的存儲(chǔ)屬性，并計(jì)算每一個(gè)的length，累加起來(lái)就是已使用的容量了~~~

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)計(jì)算出總?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`)