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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
一个手写的vue放大镜效果
Aug 09 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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多任务程序实例解析
2014/07/19 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
javascript prototype 原型链
2009/03/12 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python实现的文件同步服务器实例
2015/06/02 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python入门学习指南分享
2018/04/11 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
群众路线批评与自我批评
2014/02/06 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
环境科学专业求职信
2014/08/04 职场文书
户籍证明书标准模板
2014/09/10 职场文书
大学生作弊检讨书
2014/09/11 职场文书
学校就业保障协议书
2019/06/24 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
MySQL基础(二)
2021/04/05 MySQL
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python执行js代码的方法
2021/05/13 Python