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 表单验证扩展代码(一)
Oct 11 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
React Component存在的几种形式详解
Nov 06 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
深入解析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模板类代码
2008/09/07 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
28个JS验证函数收集
2010/03/02 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python中的下划线详解
2015/06/24 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
学校地质灾害防治方案
2014/06/10 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
施工安全责任协议书
2016/03/23 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android