一、如何获取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:。

如何获得浏览器localStorage的剩余容量的更多相关文章

  1. 检测页面的localstorage剩余容量

    首先用了JSON.stringify(localStorage).length得出你当前页面的localstorage所使用的字符数量current_num. 然后你再去http://arty.nam ...

  2. 查看源代码查找获取sd卡剩余容量的代码

    下载android源码,找到app下的Settings应用源码,导入Settings项目(android项目源码) 查找“可用空间”得到 <string name="memory_av ...

  3. Windows c(++)获取磁盘剩余容量

    头文件 #include <windows.h> #include <wtypes.h> 函数 GetDiskFreeSpaceExA 获取剩余可用空间 /// 得到盘符, 例 ...

  4. 利用浏览器LocalStorage缓存图片,视频文件

    文章路径:https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

  5. 【ASM】查看ASM磁盘组剩余容量和总容量

    col total_size for a10; col free_size for a20; select name,total_mb/1024 || 'G' as total_size , free ...

  6. localStorage和sessionStorage火狐浏览器和其他高级浏览器的区别

    例子: <script>window.onload=function(){ var oSetData = document.getElementById('setData'); var o ...

  7. localStorage 存满了怎么办?

    先来几道面试题 1.a.meituan.com 和 b.meituan.com 这两个域能够共享同一个 localStorage 吗? 2.在 webview 中打开一个页面:i.meituan.co ...

  8. 浏览器本地存储(browser-storage,HTML5-localStorage > IE-UserData > Cookie)

    https://www.baidufe.com/component/browser-storage/index.html BrowserStorage是浏览器本地存储的一个解决方案,存储优先级依次为: ...

  9. [开源]jquery-ajax-cache:快速优化页面ajax请求,使用localStorage缓存请求

    项目:jquery-ajax-cache 地址:https://github.com/WQTeam/jquery-ajax-cache     最近在项目中用到了本地缓存localStorage做数据 ...

随机推荐

  1. Oracle数据库建表并用SQL编程分等级

    --创建学生表create table XS_543 ( XH char(6) not null , XM varchar2(20) not null, ZYM varchar2(10), XB ch ...

  2. win7系统旗舰版path

    %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShel ...

  3. jinfo命令的使用

    jinfo命令 该命令可以打印出java进程的配置信息:包括jvm参数,系统属性等用法: jinfo [ option ] pid jinfo [ option ] executable core j ...

  4. 前端mvc框架backbone.js入门

    关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...

  5. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  6. ThinkPHP3.2 G函数代码及 使用方法

    ThinkPHP3.2 G函数代码及 使用方法 代码: // 内存是否可调用 define('MEMORY_LIMIT_ON',function_exists('memory_get_usage')) ...

  7. JavaScript学习笔记-实例详解-类(二)

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  8. 总结CSS3新特性(颜色篇)

    颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...

  9. sharepoint多个NLB的web前段如何进行文件同步?

    大家都知道,sharepoint2010服务器场可能有2个或2个以上的web服务器做NLB,有个时候牵涉到上传文件到文件夹(说到这里,有人会说全部以二进制文件保存到文档库啊,但是有些情况不允许的,比如 ...

  10. 访客至上的Web、移动可用性设计--指导原则

    文章出自:听云博客 关于可用性设计,之前写过一个“纸上谈兵”版本的,那篇帖子主要是根据A/B test的方式来进行的. 但是最近找了本Steve krug写的Don't make me think,我 ...