JS代码计算LocalStorage容量示例详解

第JS代码计算LocalStorage容量示例详解目录LocalStorage容量计算总容量已使用容量剩余可用容量

LocalStorage容量

localStorage的容量大家都知道是5M，但是却很少人知道怎么去验证，而且某些场景需要计算localStorage的剩余容量时，就需要我们掌握计算容量的技能了~~

计算总容量

我们以10KB一个单位，也就是10240B，1024B就是10240个字节的大小，我们不断往localStorage中累加存入10KB，等到超出最大存储时，会报错，那个时候统计出所有累积的大小，就是总存储量了！

注意：计算前需要先清空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)

//统计完记得清空

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`)

可以查看已用容量

剩余可用容量

我们已经计算出总容量和已使用容量，那么剩余可用容量=总容量-已使用容量

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`)