Javascript 计算字符串在localStorage中所占字节数


Posted in Javascript onOctober 21, 2015

最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的。而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16。因此本文只对这两种编码进行讨论。

下面这个定义摘自维基百科(http://zh.wikipedia.org/zh-cn/UTF-8),做了部分删减。

UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,可以表示Unicode标准中的任何字符,且其编码中的第一个字节仍与ASCII相容,使用一至四个字节为每个字符编码

其编码规则如下:

字符代码在000000 ? 00007F之间的,用一个字节编码;

000080 ? 0007FF之间的字符用两个字节;
000800 ? 00D7FF 和 00E000 ? 00FFFF之间的用三个字节,注: Unicode在范围 D800-DFFF 中不存在任何字符;
010000 ? 10FFFF之间的用4个字节。

而UTF-16 则是定长的字符编码,大部分字符使用两个字节编码,字符代码超出 65535 的使用四个字节,如下:

000000 ? 00FFFF 两个字节;
010000 ? 10FFFF 四个字节。

一开始认为既然页面用的是UTF-8编码,那么存入localStorage的字符串,应该也是用UTF-8编码的。但后来测试发现,明明计算出的size是不到5MB,存入localStorage却抛异常了。想了想,页面的编码是可以改的。如果localStorage按照页面的编码存字符串,不就乱套了?浏览器应该都是使用UTF-16编码的。用UTF-16编码计算出5MB的字符串,果然顺利写进去了。超过则失败了。

好了,附上代码实现。计算规则就是上面写的,为了计算速度,把两个for循环分开写了。

/**
   * 计算字符串所占的内存字节数,默认使用UTF-8的编码方式计算,也可制定为UTF-16
   * UTF-8 是一种可变长度的 Unicode 编码格式,使用一至四个字节为每个字符编码
   *
   * 000000 - 00007F(128个代码)   0zzzzzzz(00-7F)               一个字节
   * 000080 - 0007FF(1920个代码)   110yyyyy(C0-DF) 10zzzzzz(80-BF)       两个字节
   * 000800 - 00D7FF
    00E000 - 00FFFF(61440个代码)  1110xxxx(E0-EF) 10yyyyyy 10zzzzzz      三个字节
   * 010000 - 10FFFF(1048576个代码) 11110www(F0-F7) 10xxxxxx 10yyyyyy 10zzzzzz 四个字节
   *
   * 注: Unicode在范围 D800-DFFF 中不存在任何字符
   * {@link http://zh.wikipedia.org/wiki/UTF-8}
   *
   * UTF-16 大部分使用两个字节编码,编码超出 65535 的使用四个字节
   * 000000 - 00FFFF 两个字节
   * 010000 - 10FFFF 四个字节
   *
   * {@link http://zh.wikipedia.org/wiki/UTF-16}
   * @param {String} str
   * @param {String} charset utf-8, utf-16
   * @return {Number}
   */
  var sizeof = function(str, charset){
    var total = 0,
      charCode,
      i,
      len;
    charset = charset ? charset.toLowerCase() : '';
    if(charset === 'utf-16' || charset === 'utf16'){
      for(i = 0, len = str.length; i < len; i++){
        charCode = str.charCodeAt(i);
        if(charCode <= 0xffff){
          total += 2;
        }else{
          total += 4;
        }
      }
    }else{
      for(i = 0, len = str.length; i < len; i++){
        charCode = str.charCodeAt(i);
        if(charCode <= 0x007f) {
          total += 1;
        }else if(charCode <= 0x07ff){
          total += 2;
        }else if(charCode <= 0xffff){
          total += 3;
        }else{
          total += 4;
        }
      }
    }
    return total;
  }
Javascript 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
js返回顶部实例分享
Dec 21 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
深入解析JavaScript的闭包机制
Oct 20 #Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 #Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 #Javascript
javascript省市级联功能实现方法实例详解
Oct 20 #Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 #Javascript
js点击文本框后才加载验证码实例代码
Oct 20 #Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 #Javascript
You might like
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python requests指定出口ip的例子
2019/07/25 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
《三峡》教学反思
2014/03/01 职场文书
婚前协议书
2014/04/15 职场文书
启动仪式策划方案
2014/06/14 职场文书
见习报告格式范文
2014/11/08 职场文书
最感人的道歉情书
2015/05/12 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
python图像处理 PIL Image操作实例
2022/04/09 Python