`

如何获得浏览器localStorage的剩余容量

阅读更多
一、如何获取localStorage的剩余容量

在H5大行其道的今天,localStorage(本地存储)对每一个前断攻城师来说都不太陌生。同时localStorage也给我们带来了极大的便利,不用于cookies的小家子气,localStorage的存储量还是很客观的。

由于浏览器的差异性,导致我们需要对localStorage中的内容做出一部分取舍。而根据目前的市场上浏览器对loaclStorage的兼容性来看,最佳的大小是2.5M左右。如何得到localStorage的容量大小,大概接触过localStorage都会遇到的这么一个问题。

localStorage 中存储的是字符串,根据这一条件,我们可以通过取出所有的localStorage的内容,而其长度就是大小。具体代码如下:
(function(){
    if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    console.log('当前localStorage剩余容量为' + (size / 1024).toFixed(2) + 'KB');
})()


二、如何获取localStorage最大容量


通过上面的分析,其实思路基本是一样的,都是通过字符长度来判断。
(function() {
   if(!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
   }    var test = '0123456789';
   var add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   var sum = test;
   var show = setInterval(function(){
      sum += test;
      try {
       window.localStorage.removeItem('test');
       window.localStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()
分享到:
评论

相关推荐

    RN-本地剩余

    LocalStorage则持久化存储数据,即使浏览器关闭,数据也会保留,但容量有限,通常为5MB。而IndexedDB是更复杂的数据存储解决方案,适合存储大量结构化数据,如数据库记录,支持查询操作。 在React Native中,由于不...

    关于前端面试的试题-改.docx

    - sessionStorage只在当前会话下有效,关闭浏览器后数据消失,容量相对较大。 - localStorage长期存储,直到被手动清除,容量较大,且不会随会话结束而消失,常用于存储用户偏好设置等。 2. prototype是对象的原型...

    前端面试大全

    - **容量**:WebStorage 提供了更大的存储空间,相比cookie更适合作为大规模数据的本地存储方案。 - **传输**:WebStorage 存储的数据不会随HTTP请求发送给服务器,减少了带宽消耗。 - **API**:WebStorage 提供...

    页面只能打开一次Cooike如何实现

    在网页设计中,有时我们需要确保某个页面只能被用户打开一次,以避免因...此外,对于现代浏览器,可能需要考虑使用HTML5的LocalStorage或SessionStorage来替代Cookie,因为它们提供了更大的存储容量且不涉及跨域问题。

    基于改进粒子群算法的DG储能选址定容优化模型:解决电力系统时序性问题的可靠程序解决方案,基于改进粒子群算法的DG储能选址定容模型优化解决电力系统问题,DG储能选址定容模型matlab 程序采用改进粒子

    基于改进粒子群算法的DG储能选址定容优化模型:解决电力系统时序性问题的可靠程序解决方案,基于改进粒子群算法的DG储能选址定容模型优化解决电力系统问题,DG储能选址定容模型matlab 程序采用改进粒子群算法,考虑时序性得到分布式和储能的选址定容模型,程序运行可靠 这段程序是一个改进的粒子群算法,主要用于解决电力系统中的优化问题。下面我将对程序进行详细分析。 首先,程序开始时加载了一些数据文件,包括gfjl、fljl、fhjl1、cjgs和fhbl。这些文件可能包含了电力系统的各种参数和数据。 接下来是一些参数的设置,包括三种蓄电池的参数矩阵、迭代次数、种群大小、速度更新参数、惯性权重、储能动作策略和限制条件等。 然后,程序进行了一些初始化操作,包括初始化种群、速度和适应度等。 接下来是主要的迭代过程。程序使用粒子群算法的思想,通过更新粒子的位置和速度来寻找最优解。在每次迭代中,程序计算了每个粒子的适应度,并更新个体最佳位置和全局最佳位置。 在每次迭代中,程序还进行了一些额外的计算,如潮流计算、储能约束等。这些计算可能涉及到电力系统的潮流计算、功率平衡等知识点。 最后,程序输

    数学建模相关主题资源2

    数学建模相关主题资源2

    实验程序与文档报告撰写指南:科研和工程项目的综合资源介绍及应用技巧

    内容概要:本文详细介绍了一系列用于科学研究、工程项目和技术开发中至关重要的实验程序编写与文档报告撰写的资源和工具。从代码托管平台(GitHub/GitLab/Kaggle/CodeOcean)到云端计算环境(Colab),以及多种类型的编辑器(LaTeX/Microsoft Word/Overleaf/Typora),还有涵盖整个研究周期的各种辅助工具:如可视化工具(Tableau)、数据分析平台(R/Pandas)、项目管理工具(Trello/Jira)、数据管理和伦理审核支持(Figshare/IRB等),最后提供了典型报告的具体结构指导及其范本实例链接(arXiv/PubMed)。这为实验流程中的各个环节提供了系统的解决方案,极大地提高了工作的效率。 适合人群:高校学生、科研工作者、工程技术人员以及从事学术写作的人员,无论是新手入门还是有一定经验的人士都能从中受益。 使用场景及目标:帮助读者高效地准备并开展实验研究活动;促进团队间协作交流;规范研究报告的形式;提高对所收集资料的安全性和隐私保护意识;确保遵循国际公认的伦理准则进行实验。

    四轮毂驱动电动汽车稳定性控制策略:基于滑模与模糊神经网络的转矩分配与仿真研究,四轮毂驱动电动汽车稳定性控制:基于滑模与模糊神经网络的转矩分配策略及联合仿真验证,四轮毂驱动电动汽车稳定性控制,分布式驱动

    四轮毂驱动电动汽车稳定性控制策略:基于滑模与模糊神经网络的转矩分配与仿真研究,四轮毂驱动电动汽车稳定性控制:基于滑模与模糊神经网络的转矩分配策略及联合仿真验证,四轮毂驱动电动汽车稳定性控制,分布式驱动转矩分配。 上层基于滑模,模糊神经网络控制器决策横摆力矩,下层基于动态载荷分配,最优分配,平均分配均可做。 simulink与carsim联合仿真。 ,四轮毂驱动;电动汽车稳定性控制;分布式驱动;转矩分配;滑模控制;模糊神经网络控制器;横摆力矩;动态载荷分配;最优分配;平均分配;Simulink仿真;Carsim仿真,四驱电动稳定性控制:滑模与模糊神经网络决策的转矩分配研究

    PyCharm 安装教程.zip

    本资源提供了一份详细的PyCharm安装教程,涵盖下载、安装、配置、激活及使用步骤,适合新手快速搭建Python开发环境。

    233.JSP+SQL金融借贷管理系统.zip

    毕业设计

    原版宋体安装文件.ttf

    原版宋体.ttf,原版宋体安装文件,安装方式,直接右键安装。

    MicroBlaze实现IIC控制器+uart控制器+LED控制,工程源码 vivado2021.1 + vitis2021.1

    利用Xilinx FPGA内嵌的软核处理器MicroBlaze,加上自主编写的AXI_IIC控制器,实现对IMX327传感器IIC总线的控制,同时辅以UART调试串口,实现系统状态的实时监控与调试。

    0110_xee_irrigation_index.txt

    在 GEE(Google Earth Engine)中,XEE 包是一个用于处理和分析地理空间数据的工具。以下是对 GEE 中 XEE 包的具体介绍: 主要特性 地理数据处理:提供强大的函数和工具,用于处理遥感影像和其他地理空间数据。 高效计算:利用云计算能力,支持大规模数据集的快速处理。 可视化:内置可视化工具,方便用户查看和分析数据。 集成性:可以与其他 GEE API 和工具无缝集成,支持多种数据源。 适用场景 环境监测:用于监测森林砍伐、城市扩展、水体变化等环境问题。 农业分析:分析作物生长、土地利用变化等农业相关数据。 气候研究:研究气候变化对生态系统和人类活动的影响。

    通用MySQL数据库备份系统.zip

    毕业设计

    用esp 32C3芯片获取天气和时间的代码思路

    整个文件的代码

    名字微控制器_STM32_DFU_引导加载程序_dapboo_1740989527.zip

    名字微控制器_STM32_DFU_引导加载程序_dapboo_1740989527.zip

    工具变量-全国分市人口密度数据集-基本无缺失值(2000-2023年).xlsx

    详细介绍及样例数据:https://blog.csdn.net/T0620514/article/details/145991332

    anaconda配置pytorch.zip

    anaconda配置pytorch环境

    立体仓库控制组态王6.55与三菱PLC联机仿真程序:视频教程与IO表接线图CAD详解,9仓位立体仓库控制系统优化方案:组态王6.55与三菱PLC联机仿真程序视频教程及IO表接线图CAD详解,9仓位立体

    立体仓库控制组态王6.55与三菱PLC联机仿真程序:视频教程与IO表接线图CAD详解,9仓位立体仓库控制系统优化方案:组态王6.55与三菱PLC联机仿真程序视频教程及IO表接线图CAD详解,9仓位立体仓库控制组态王6.55和三菱PLC联机仿真程序+视频+带io表接线图CAD ,关键词:立体仓库;控制组态王6.55;三菱PLC;联机仿真程序;视频;io表接线图;CAD,立体仓库控制组态王与三菱PLC联机仿真程序资源包

Global site tag (gtag.js) - Google Analytics