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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
网络传输协议(http协议)
Nov 18 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
WebPack工具运行原理及入门教程
Dec 02 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编码规范之注释和文件结构说明
2010/07/09 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
Jquery 扩展方法
2010/05/06 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python初学者常见错误详解
2019/07/02 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
银行毕业实习自我鉴定
2013/09/19 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
活动总结报告格式
2014/05/09 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python