localstorage存储

我们要写一个缓存SDK

1.可以拉取更新的资源。

2.可以存储拉取下来的资源。

3.可以根据版本迭代，置换国企的资源。

功能拆解

1.网络交互能力，XHR(ajax)；

2.本地存储能力，localSDK(将从服务器端拉去的代码存储到浏览器的localstorage里面);

3.缓存展示能力，浏览器的dom解析器（无论是样式表还是js文件）;

拆解模块细化-网络能力（Xhrfactory对象）

1.create:创建XMLHttpRequest对象；

2.readystate:xhr对象的回调函数；

3.parameter：在传输过程中需要带给服务器一些参数，这些参数需要进行本地的字符串转换；

4.get:最后将请求发送出去；

拆解模块细化-存储能力（mLocalSdk对象）

1.resourceVersion:维护本地缓存版本，更新数据；

2.resourceJavascriptList:需要缓存的文件列表；

3.needUpdate:检查文件是否需要更新；

4.isIE:（ie8支持）判断是否为IE浏览器,若为ie浏览器则不用localstorage方法存储，而用正常的方法来存储js文件或者css文件;

4.checkHedge:检查本地缓存(localstorage是有存储上线的)是否溢出；

5.startup:启动方法，也是读取本地缓存（1.先存再取；2.读上一次的，再存）；

save:保存缓存，与startup相对应；

拆解模块细化-dom工具（mDomUtil对象）

1.addClassByLink:添加外联css;

2.addClassByInline:添加内联css;

4.addJavascriptByLink:添加外联javascript;

5.addJavascriptByInline:添加内联javascript;

localstorage是主角

优点:兼容性中等，操作简单，就是key-value形式，几乎现代的浏览器都支持。

缺点：存在大小限制。

localStorage 本地存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。

存储容量限制

浏览器对于存储数据的大小有限制，限制的大小普遍在5M/域，超出则会报Uncaught QuotaExceededError错误（如下方）。因此在开发时应注意控制存储数据保持在限制大小内，并定时清除无用的数据。

判断是否为IE浏览器(IE的能力判断)：

obj={
 isIE: (function() {   
        var v = 3;
        var div = document.createElement('div');
        var all = div.getElementsByTagName('i');
        while (div.innerHTML = '<!-- [if gt IE' + (++v) + ']><i></i><![endif] -->', !all[0])
             {
                 console.log("v:",v);
                if(v > 11){return false}
            }
        return v > 3 ? v : false;
    })();

//自执行函数直接返回true或者false

};

捕获容量超出时：

try {
    localStorage.setItem('resourceVersion', resourceVersion);
} catch (oException) {
    if (oException.name == 'QuotaExceededError') {
        localStorage.clear();
        localStorage.setItem('resourceVersion', resourceVersion);
    }
    alert('QuotaExceededError');
}