使用iframe给页面的localStorage扩容

浏览器提供的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;i5){
                            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