博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用iframe给页面的localStorage扩容
阅读量:5026 次
发布时间:2019-06-12

本文共 2473 字,大约阅读时间需要 8 分钟。

浏览器提供的localStorage本地存储的最大空间是5M,如果不够用呢,这时候就需要考虑来给localStorage扩容。

思路如下:

  1. 在【A域】下引入【B域】,【A域】空间足够时,读写由【A域】来完成,数据存在【A域】下;当【A域】空间不够时,读写由【B域】来完成,数据存在【B域】下

  2. 【A域】空间不够需要在【B域】读写时,通过postMessage 向【B域】发送跨域消息,【B域】监听跨域消息,在接到指定的消息时进行读写操作

  3. 【B域】接到跨域消息时,如果是写入删除可以不做什么,如果是读取,就要先读取本域本地数据通过postMessage向父页面发送消息

  4. 【A域】在读取【B域】数据时就需要监听来自【B域】的跨域消息

注意事项:

  1. window.postMessage()方法,向【B域】发消息,应用window.frames[0].postMessage() 这样iframe内的【B域】才可以接到

  2. 同理,【B域】向 【A域】发消息时应用,window.parent.postMessage()

  3. 【A域】的逻辑一定要在iframe 加载完成后进行

【A域】的页面如下:

index.html

            
//嵌入【B域】的一个空页面

由于需要判断【A域】的空间是否足够,所以需要计算【A域】已经被占用的空间。那么localStorage中的字符串以什么编码格式存储的呢?

经过反复试验发现,当使用utf-16的编码方式进行计算时,当存储的字符串大于5M时,浏览区就会报错:字符串大小超过最大值。
所以localStorage中的字符串是以utf-16进行编码的。

localStorage.js

/*这段代码是用来测试localStorage中字符串的编码格式*//*** 计算字符串所占的内存字节数,默认使用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 中不存在任何字符* * UTF-16 大部分使用两个字节编码,编码超出 65535 的使用四个字节* 000000 - 00FFFF  两个字节* 010000 - 10FFFF  四个字节* * @param  {String} str * @param  {String} charset utf-8, utf-16* @return {Number}*/function sizeof(str,charset){    var strCode=0,charCode;    charset = charset?charset.toLowerCase():'';    if(charset=='utf-16'||charset=='utf16'){        for(var i=0,len=str.length;i
5){ window.frames[0].postMessage(JSON.stringify({type:type,key:key,value:value}),'http://localhost:8000'); }else{ localStorage.setItem(key,value); } break; case 'remove': if(val){ localStorage.removeItem(key); }else{ window.frames[0].postMessage(JSON.stringify({type:type,key:key}),'http://localhost:8000'); } break; default: break; }}function sizeofLocal(){ var myStr = '',charCode,strCode=0; for(item in localStorage){ if(localStorage.hasOwnProperty(item)){ myStr += localStorage.getItem(item); } } for(var i=0,len=myStr.length;i

【B域】的页面如下

storage.html

    

转载于:https://www.cnblogs.com/cherishSmile/p/8390754.html

你可能感兴趣的文章
【Github教程】史上最全github使用方法:github入门到精通
查看>>
抽象工厂模式(Abstract Factory)
查看>>
luogu1373 小a和uim之大逃离 (dp)
查看>>
Redis的Pub/Sub客户端实现
查看>>
SQL日常问题和技巧——持续更新
查看>>
springMVC入门(一)------springMVC基本概念与安装
查看>>
Sam做题记录
查看>>
[bzoj] 2453 维护数列 || 单点修改分块
查看>>
IIS版本变迁
查看>>
BZOJ3884: 上帝与集合的正确用法 拓展欧拉定理
查看>>
mybatis09--自连接一对多查询
查看>>
myeclipse10添加jQuery自动提示的方法
查看>>
【eclipse jar包】在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可。...
查看>>
视频监控 封装[PlayCtrl.dll]的API
查看>>
软件工程APP进度更新
查看>>
Python 使用正则替换 re.sub
查看>>
CTF中那些脑洞大开的编码和加密
查看>>
简化工作流程 10款必备的HTML5开发工具
查看>>
c++ 调用外部程序exe-ShellExecuteEx
查看>>
Java进击C#——语法之知识点的改进
查看>>