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 相关文章推荐
js判断undefined变量类型使用typeof
Jun 03 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
DOM精简教程
2006/10/03 Javascript
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery设计思想
2017/03/07 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vue实现简单的星级评分组件源码
2018/11/16 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python线程join方法原理解析
2020/02/11 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
文化活动实施方案
2014/03/28 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
安徽导游词
2015/02/12 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS