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 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jQuery功能函数详解
Feb 01 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
vuex实现简易计数器
Oct 27 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
微信小程序实现顶部导航特效
Jan 28 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python中decorator使用实例
2015/04/14 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python内存映射文件读写方式
2020/04/24 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
经理职责范文
2013/11/08 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
设备管理实施方案
2014/05/31 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
预备党员考察意见范文
2015/06/01 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书