码迷，mamicode.com
首页 > 其他好文 > 详细

兼容多浏览器的本地存储

时间：2015-12-26 16:42:42      阅读：181      评论：0      收藏：0      [点我收藏+]

标签：

在做考试系统时需要解决这样一个问题，就是当考生考试时可能出出现断网、关闭浏览器，刷新等问题，数据此时可能没有及时写入数据库，所以造成数据丢失问题，，所以这里就需要用到本地存储，以前的版本都是用cookie，但是不得不说cookie太小了，只有可怜的4k，而机房的网有时候实在是让人捉急，所以，考虑换一种方案。

直接读取XML实现方式

    因为本地存储平时接触的不是太多，开始想的只是简单的读取本地的XML，做起来倒是挺容易的，一个语句就能搞定： 

  1. <script language="javascript"type="text/javascript">  
  2.                   var fso, f1, ts, s;  
  3.          varForReading = 1;  
  4.          fso= new ActiveXObject("Scripting.FileSystemObject");  
  5.          //创建文件  
  6.      f1 =fso.CreateTextFile("F:\\testfile.txt", true);  
  7.          //填写一行数据  
  8.          f1.WriteLine("我是美丽的姑娘");  
  9.          f1.WriteBlankLines(1);  
  10.          //关闭文件  
  11.          f1.Close();  
  12.          //打开文件  
  13.          ts= fso.OpenTextFile("F:\\list.xml", ForReading);  
  14.           var nodes = ts.documentElement.childNodes;  
  15.          //读取文件一行内容到字符串  
  16.          s= ts.ReadLine();  
  17.          //显示字符串信息  
  18.          alert("文件信息是： "+s);  
  19.          //关闭文件  
  20.          ts.Close();  
  21.           
  22. </script>  



 

    但是这样写虽然简单，带来的弊端也不少，于是上网查到UserData可以解决这个问题。

UserData实现方式：

    userData行为通过将数据写入一个UserData存储区（UserDatastore）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。

    该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。

    userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

    userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。

    但是，UserData是IE的东西，所以其他浏览器不兼容，当时，因为现在做的这个考试系统一般情况下都在UserData下使用，所以也实现了一下：

 

  1. <HTML>  
  2. <HEAD>  
  3. <STYLE>  
  4. .userData{behavior:url(#default#userdata);}  
  5. </STYLE>  
  6. <SCRIPT>  
  7. function fnSaveInput(){  
  8. var oPersist=oPersistForm.oPersistInput;  
  9. oPersist.setAttribute("sPersist",oPersist.value);//将oPersist.value存储为sPersist属性  
  10. oPersist.save("oXMLBranch"); //存储在名为oXMLBranch的UserData存储区  
  11. }  
  12. function fnLoadInput(){  
  13. var oPersist=oPersistForm.oPersistInput;  
  14.  varabc=oPersist.load("oXMLBranch"); //载入在名为oXMLBranch的UserData存储区  
  15. oPersist.value=oPersist.getAttribute("sPersist");//将sPersist属性赋值给oPersist.value  
  16. }  
  17. </SCRIPT>  
  18. </HEAD>  
  19. <BODY>  
  20. <FORM ID="oPersistForm">  
  21. <INPUT CLASS="userData"TYPE="text" ID="oPersistInput">  
  22. <INPUT TYPE="button"VALUE="Load" onclick="fnLoadInput()">  
  23. <INPUT TYPE="button"VALUE="Save" onclick="fnSaveInput()">  
  24. </FORM>  
  25. </BODY>  
  26. </HTML>  



 

HTML5 LocalStorage   

    但是，毕竟UserData有他的局限性，处于兼容考虑，也在实现过程中听说了一种叫HTML5 LocalStorage 的东西。

要介绍HTML5 LocalStorage，首先介绍一下本地存储的历史：

技术分享

 

    从这里可以看出去，本地存储一路从Cookies走到最后，真心的不容易，那么，HTML5 LocalStorage 具体有什么好处呢？

    最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。

    userData是IE的东西。现在用的最多的是Flash，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件。到了HTML5把这些都统一了，官方建议是每个网站5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。

    那么，有哪些浏览器支持他呢？

技术分享

 

    所以根据图我们可以看出，技术所以的浏览器都支持HTML5 LocalStorage，所以，这也让本地存储前途一片光明啊！

    下面写一个简单的实例： 

  1. <body>  
  2. <p>You have viewed this page <spanidspanid="count">0</span> time(s).</p>  
  3. <p><input type="button"value="changeStorage" onClick="changeS()"/></p>  
  4. <script>  
  5.          varstorage = window.localStorage;  
  6.           
  7.          if(!storage.getItem("pageLoadCount"))storage.setItem("pageLoadCount",0);  
  8.                    storage.pageLoadCount= parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换  
  9.                    document.getElementById("count").innerHTML= storage.pageLoadCount;  
  10.                    showStorage();  
  11.                    if(window.addEventListener){  
  12.                     window.addEventListener("storage",handle_storage,false);  
  13.                    }elseif(window.attachEvent){  
  14.                     window.attachEvent("onstorage",handle_storage);  
  15.          }  
  16.           
  17.          functionhandle_storage(e){  
  18.                     if(!e){e=window.event;}  
  19.                     showObject(e);  
  20.          }  
  21.           
  22.          functionshowObject(obj){  
  23.                     //递归显示object  
  24.                     if(!obj){return;}  
  25.                              for(var i in obj){  
  26.                               if(typeof(obj[i])!="object" ||obj[i]==null){  
  27.                                  document.write(i+ " : " + obj[i] + "<br/>");  
  28.                               }   else{  
  29.                                  document.write(i+ " : object" + "<br/>");  
  30.                               }  
  31.                     }  
  32.          }  
  33.           
  34.          storage.setItem("a",5);  
  35.           
  36.          functionchangeS(){  
  37.                     //修改一个键值，测试storage事件  
  38.                     if(!storage.getItem("b")){storage.setItem("b",0);}  
  39.                            storage.setItem(‘b‘,parseInt(storage.getItem(‘b‘))+1);  
  40.          }  
  41.           
  42.          functionshowStorage(){  
  43.                     //循环显示localStorage里的键值对  
  44.                     for(var i=0;i<storage.length;i++){  
  45.                               //key(i)获得相应的键，再用getItem()方法获得对应的值  
  46.                               document.write(storage.key(i)+ " :" + storage.getItem(storage.key(i)) + "<br>");  
  47.                     }  
  48.          }  
  49. </script>  
  50. </body>  



 

    当运行这个实例的时候，出现一个诡异的问题，就是其他浏览器还好，在IE下报错，所以，这也算是他的一个特点吧，它在IE、Firefox测试的时候需要把文件上传到服务器上（或者localhost），直接点开本地的HTML文件，是不行的，这里一定要注意。

    最后，这些demo都有了，我们详细的讲一下它的一些属性：

技术分享

 

    到这里，基本上基本的概念和简单的demo就都清楚了，现在需要的就是把这些东西整合到一起，因为我们知道HTML5 LocalStorage不能支持IE8以下的浏览器，但是考试系统运行的环境大部分都在IE8以下，所以我们如果想做一个兼容性比较好的本地存储，就需要UserData和HTML5 LocalStorage连起来用，皇天不负有心人，在实现的过程中，我在网上找到了这样好的代码，毕竟以实现程序为主，又好使的，还是用用好使的吧。下面是代码：

我是借鉴的代码哦

    但是这个文章里没有对命名空间给出代码，所以直接使用是有问题的，需要加入命名空间的代码，以下是我稍微改动了一下，并且适应于考试系统的代码：

完整的demo

    HTML代码（注意，一定要放在服务器上运行，IIS,TOMCAL,JBOSS都可以，不要直接点击运行）： 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <metahttp-equivmetahttp-equiv="Content-Type" content="text/html;charset=gb2312" />  
  5.    
  6. <title>无标题文档</title>  
  7.  <script type="text/javascript"src="js/jquery-1.4.2.min.js"></script>  
  8.    <script type="text/javascript" src="js/jquery.utils.js"></script>  
  9.  <script type="text/javascript"src="js/localstorage.js"></script>  
  10.    
  11.    
  12. <script>  
  13. function saveStu(){  
  14.          qext.LocalStorage.save("2344234","234","234234","234234");  
  15. }  
  16.    
  17.  function saveMore(){  
  18. // 保存多个对象  
  19. qext.LocalStorage.set([{  
  20.   key : "username",  
  21.   value : "{  ‘sitename’: ‘K JSON’, ‘siteurl’: ‘www.kjson.com’, ‘keyword’: ‘JSON在线校验,格式化JSON,json 在线校验’}",  
  22.    
  23.   expires : 3600 * 1000  /*单位：ms*/  
  24. },{  
  25.   key : "password",  
  26.   value : "zxlie",  
  27.   expires : 3600 * 1000  /*单位：ms*/  
  28. }]);  
  29. }   
  30. function show(){  
  31.          //获取某一个本地存储，返回值为：{key:"",value:"",expires:""}，未取到值时返回值为：null  
  32.  varrst = qext.LocalStorage.get({  
  33.    key : "2344234234234234"  
  34.  });  
  35.  alert(rst);  
  36. }  
  37. function getMore(){  
  38.          vararrGet = qext.LocalStorage.getAllKeys();  
  39.          for(vari=0;i<arrGet.length;i++){  
  40.                    varrst = qext.LocalStorage.get({  
  41.                        key : arrGet[i]  
  42.                     });  
  43.                     alert(rst);  
  44.          }  
  45. }  
  46. function removeOne(){  
  47.          qext.LocalStorage.remove({  
  48.                     key : "2344234234234"  
  49.          })  
  50. }  
  51.    
  52. </script>  
  53. </head>  
  54.    
  55. <body>  
  56. <input type="button"onclick="saveStu()" value="保存数据" />  
  57. <input type="button"onclick="show()" value="显示数据" />  
  58. <input type="button"onclick="getMore()" value="显示全部数据" />  
  59. <input type="button"onclick="removeOne()" value="移除一个数据" />  
  60. </body>  
  61. </html>  



 

JS代码： 

  1. /**  
  2.  * 注册命名空间  
  3.  *@param {String} fullNS 完整的命名空间字符串，如qui.dialog  
  4.  *@param {Boolean} isIgnorSelf 是否忽略自己，默认为false，不忽略  
  5.  *@author   
  6.  *@example  
  7.  *     window.registNS("QingFeed.Text.Bold");  
  8.  */  
  9. window.registNS =function(fullNS,isIgnorSelf){  
  10.    //命名空间合法性校验依据  
  11.    var reg = /^[_$a-z]+[_$a-z0-9]*/i;  
  12.           
  13.    // 将命名空间切成N部分, 比如baidu.libs.Firefox等  
  14.    var nsArray = fullNS.split(‘.‘);  
  15.    var sEval = "";  
  16.    var sNS = "";  
  17.    var n = isIgnorSelf ? nsArray.length - 1 : nsArray.length;  
  18.    for (var i = 0; i < n; i++){  
  19.        //命名空间合法性校验  
  20.         if(!reg.test(nsArray[i])) {  
  21.            throw new Error("Invalid namespace:" + nsArray[i] +"");  
  22.            return ;  
  23.        }  
  24.        if (i != 0) sNS += ".";  
  25.        sNS += nsArray[i];  
  26.        // 依次创建构造命名空间对象（假如不存在的话）的语句  
  27.        sEval += "if(typeof(" + sNS + ")==‘undefined‘) " +sNS + "=new Object();else " + sNS + ";";  
  28.     }  
  29.    //生成命名空间  
  30.    if (sEval != "") {  
  31.        return eval(sEval);  
  32.     }  
  33.    return {};  
  34. };  
  35.    
  36.    
  37. /**  
  38.  * 注册命名空间  
  39.  */  
  40. window.registNS(‘qext‘);  
  41.    
  42. /**  
  43.  *@class qext.LocalStorage  
  44.  * 跨浏览器的本地存储实现。高级浏览器使用localstorage，ie使用UserData。虽然说是本地存储，也请不要存储过大数据，最好不要大于64K.  
  45.  * 因为ie下UserData每页最大存储是64k。  
  46.  *@singleton  
  47.  *@author zhaoxianlie (xianliezhao@foxmail.com)  
  48.  */  
  49. (function(){  
  50.    /**  
  51.     * 验证字符串是否合法的键名  
  52.     * @param {Object} key 待验证的key  
  53.     * @return {Boolean} true：合法，false：不合法  
  54.     * @private  
  55.     */  
  56.    function _isValidKey(key) {  
  57.        return (newRegExp("^[^\\x00-\\x20\\x7f\\(\\)<>@,;:\\\\\\\"\\[\\]\\?=\\{\\}\\/\\u0080-\\uffff]+\x24")).test(key);  
  58.     }  
  59.      
  60.    //所有的key  
  61.    var _clearAllKey = "_baidu.ALL.KEY_";  
  62.      
  63.    /**  
  64.     * 创建并获取这个input:hidden实例  
  65.     * @return {HTMLInputElement} input:hidden实例  
  66.     * @private  
  67.     */  
  68.    function _getInstance(){  
  69.        //把UserData绑定到input:hidden上  
  70.        var _input = null;  
  71.        //是的，不要惊讶，这里每次都会创建一个input:hidden并增加到DOM树种  
  72.        //目的是避免数据被重复写入，提早造成“磁盘空间写满”的Exception  
  73.        _input = document.createElement("input");  
  74.        _input.type = "hidden";  
  75.        _input.addBehavior("#default#userData");  
  76.        document.body.appendChild(_input);  
  77.        return _input;  
  78.     }  
  79.      
  80.    /**  
  81.     * 将数据通过UserData的方式保存到本地，文件名为：文件名为：config.key[1].xml  
  82.     * @param {String} key 待存储数据的key，和config参数中的key是一样的  
  83.     * @param {Object} config 待存储数据相关配置  
  84.     * @cofnig {String} key 待存储数据的key  
  85.     * @config {String} value 待存储数据的内容  
  86.     * @config {String|Object} [expires] 数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间  
  87.     * @private  
  88.     */  
  89.    function __setItem(key,config){  
  90.        try {  
  91.            var input = _getInstance();  
  92.            //创建一个Storage对象  
  93.            var storageInfo = config || {};  
  94.            //设置过期时间  
  95.            if(storageInfo.expires) {  
  96.                 var expires;  
  97.                 //如果设置项里的expires为数字，则表示数据的能存活的毫秒数  
  98.                 if (‘number‘ == typeofstorageInfo.expires) {  
  99.                    expires = new Date();  
  100.                    expires.setTime(expires.getTime() + storageInfo.expires);  
  101.                 }  
  102.                 input.expires =expires.toUTCString();  
  103.            }  
  104.              
  105.            //存储数据  
  106.            input.setAttribute(storageInfo.key,storageInfo.value);  
  107.            //存储到本地文件，文件名为：storageInfo.key[1].xml  
  108.            input.save(storageInfo.key);  
  109.        } catch (e) {  
  110.        }  
  111.     }  
  112.    
  113.    /**  
  114.     * 将数据通过UserData的方式保存到本地，文件名为：文件名为：config.key[1].xml  
  115.     * @param {String} key 待存储数据的key，和config参数中的key是一样的  
  116.     * @param {Object} config 待存储数据相关配置  
  117.     * @cofnig {String} key 待存储数据的key  
  118.     * @config {String} value 待存储数据的内容  
  119.     * @config {String|Object} [expires] 数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间  
  120.     * @private  
  121.     */  
  122.    function _setItem(key,config){  
  123.        //保存有效内容  
  124.        __setItem(key,config);  
  125.          
  126.        //下面的代码用来记录当前保存的key，便于以后clearAll  
  127.        var result = _getItem({key : _clearAllKey});  
  128.        if(result) {  
  129.            result = {  
  130.                key : _clearAllKey,  
  131.                 value : result  
  132.            };  
  133.        } else {  
  134.            result = {  
  135.                 key : _clearAllKey,  
  136.                 value : ""  
  137.            };  
  138.        }  
  139.          
  140.        if(!(new RegExp("(^|\\|)" + key + "(\\||$)",‘g‘)).test(result.value)){  
  141.            result.value += "|" + key;  
  142.            //保存键  
  143.            __setItem(_clearAllKey,result);      
  144.        }  
  145.     }  
  146.      
  147.    /**  
  148.     * 提取本地存储的数据  
  149.     * @param {String} config 待获取的存储数据相关配置  
  150.     * @cofnig {String} key 待获取的数据的key  
  151.     * @return {String} 本地存储的数据，获取不到时返回null  
  152.     * @example  
  153.     * qext.LocalStorage.get({  
  154.     *      key : "username"  
  155.     * });  
  156.     * @private  
  157.     */  
  158.    function _getItem(config){  
  159.        try {  
  160.            var input = _getInstance();  
  161.            //载入本地文件，文件名为：config.key[1].xml  
  162.            input.load(config.key);  
  163.            //取得数据  
  164.            return input.getAttribute(config.key) || null;  
  165.        } catch (e) {  
  166.            return null;             
  167.        }  
  168.     }  
  169.      
  170.    /**  
  171.     * 移除某项存储数据  
  172.     * @param {Object} config 配置参数  
  173.     * @cofnig {String} key 待存储数据的key  
  174.     * @private  
  175.     */  
  176.    function _removeItem(config){  
  177.                    try{  
  178.                             varinput = _getInstance();  
  179.                             //载入存储区块  
  180.                             input.load(config.key);  
  181.                             //移除配置项  
  182.                             input.removeAttribute(config.key);  
  183.                             //强制使其过期  
  184.                             varexpires = new Date();  
  185.                             expires.setTime(expires.getTime()- 1);  
  186.                             input.expires= expires.toUTCString();  
  187.                             input.save(config.key);  
  188.                              
  189.                             //从allkey中删除当前key                        
  190.                             //下面的代码用来记录当前保存的key，便于以后clearAll  
  191.                             var result = _getItem({key :_clearAllKey});  
  192.                             if(result){  
  193.                                      result= result.replace(new RegExp("(^|\\|)" + config.key +"(\\||$)",‘g‘),‘‘);  
  194.                                      result= {  
  195.                                                key: _clearAllKey,  
  196.                                                value: result  
  197.                                      };  
  198.                                      //保存键  
  199.                                      __setItem(_clearAllKey,result);        
  200.                             }  
  201.                              
  202.                    }catch (e) {  
  203.                    }  
  204.          }  
  205.      
  206.    //移除所有的本地数据  
  207.    function _clearAll(){  
  208.        result = _getItem({key : _clearAllKey});  
  209.        if(result) {  
  210.            var allKeys = result.split("|");  
  211.            var count = allKeys.length;  
  212.            for(var i = 0;i < count;i++){  
  213.                 if(!!allKeys[i]) {  
  214.                    _removeItem({key:allKeys[i]});  
  215.                 }  
  216.            }  
  217.        }  
  218.     }  
  219.      
  220.      
  221.    /**  
  222.     * 获取所有的本地存储数据对应的key  
  223.     * @return {Array} 所有的key  
  224.     * @private  
  225.     */  
  226.    function _getAllKeys(){  
  227.        var result = [];  
  228.        var keys = _getItem({key : _clearAllKey});  
  229.        if(keys) {  
  230.            keys = keys.split(‘|‘);  
  231.            for(var i = 0,len = keys.length;i < len;i++){  
  232.                 if(!!keys[i]) {  
  233.                     result.push(keys[i]);  
  234.                 }  
  235.            }  
  236.        }  
  237.        return result ;  
  238.     }  
  239.      
  240.    /**  
  241.     * 判断当前浏览器是否支持本地存储：window.localStorage  
  242.     * @return {Boolean} true：支持；false：不支持  
  243.     * @remark 支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  244.     * @private  
  245.     */  
  246.    var _isSupportLocalStorage = ((‘localStorage‘ in window) &&(window[‘localStorage‘] !== null)),  
  247.        _isSupportUserData = !!jQuery.browser.ie;  
  248.      
  249.    qext.LocalStorage = {  
  250.        /**  
  251.         * 如果支持本地存储，返回true；否则返回false  
  252.         * @type Boolean  
  253.         */  
  254.        isAvailable : _isSupportLocalStorage || _isSupportUserData,  
  255.          
  256.        /**  
  257.         * 将数据进行本地存储（只能存储字符串信息）  
  258.         * <pre><code>  
  259.                     * //保存单个对象  
  260.                     * qext.LocalStorage.set({  
  261.                     *             key: "username",  
  262.                     *             value: "baiduie",  
  263.                     *             expires: 3600 * 1000  
  264.                     * });  
  265.                     * //保存对个对象  
  266.                     * qext.LocalStorage.set([{  
  267.                     *             key: "username",  
  268.                     *             value: "baiduie",  
  269.                     *             expires: 3600 * 1000  
  270.                     * },{  
  271.                     *             key: "password",  
  272.                     *             value: "zxlie",  
  273.                     *             expires: 3600 * 1000  
  274.                     * }]);  
  275.         * </code></pre>  
  276.         * @param {Object} obj 待存储数据相关配置，可以是单个JSON对象，也可以是由多个JSON对象组成的数组  
  277.         * <ul>  
  278.         * <li><b>key</b> : String <divclassdivclass="sub-desc">待存储数据的key，务必将key值起的复杂一些，如：baidu.username</div></li>  
  279.         * <li><b>value</b> : String <divclassdivclass="sub-desc">待存储数据的内容</div></li>  
  280.         * <li><b>expires</b> : String/Object (Optional)<divclassdivclass="sub-desc">数据的过期时间，可以是数字，单位是毫秒；也可以是日期对象，表示过期时间</div></li>  
  281.         * </ul>  
  282.         */  
  283.        set : function(obj){  
  284.                             //保存单个对象  
  285.                             var_set_ = function(config){  
  286.                                      //key校验  
  287.                                      if(!_isValidKey(config.key)){return;}  
  288.    
  289.                                      //待存储的数据  
  290.                                      varstorageInfo = config || {};  
  291.                                       
  292.                                      //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  293.                                      if(_isSupportLocalStorage){  
  294.                                                window.localStorage.setItem(storageInfo.key,storageInfo.value);  
  295.                                                if(config.expires){  
  296.                         var expires;  
  297.                         //如果设置项里的expires为数字，则表示数据的能存活的毫秒数  
  298.                         if (‘number‘ == typeofstorageInfo.expires) {  
  299.                             expires = newDate();  
  300.                            expires.setTime(expires.getTime() + storageInfo.expires);  
  301.                         }  
  302.    
  303.                        window.localStorage.setItem(storageInfo.key +".expires",expires);  
  304.                                                }  
  305.                                      }else if(_isSupportUserData) { //IE7及以下版本，采用UserData方式  
  306.                                                _setItem(config.key,storageInfo);  
  307.                                      }         
  308.                             };  
  309.    
  310.                             //判断传入的参数是否为数组  
  311.                             if(obj&& obj.constructor === Array && obj instanceof Array){  
  312.                                      for(vari = 0,len = obj.length;i < len;i++){  
  313.                                                _set_(obj[i]);  
  314.                                      }  
  315.                             }elseif(obj){  
  316.                                      _set_(obj);  
  317.                             }  
  318.        },  
  319.                     
  320.                    /**  
  321.                     * 提取本地存储的数据  
  322.         * <pre><code>  
  323.                     * //获取某一个本地存储，返回值为：{key:"",value:"",expires:""}，未取到值时返回值为：null  
  324.                     * var rst = qext.LocalStorage.get({  
  325.                     *             key: "username"  
  326.                     * });  
  327.                     * //获取多个本地存储，返回值为：["","",""]，未取到值时返回值为：[null,null,null]  
  328.                     * qext.LocalStorage.get([{  
  329.                     *             key: "username"  
  330.                     * },{  
  331.                     *             key: "password"  
  332.                     * },{  
  333.                     *             key: "sex"  
  334.                     * }]);  
  335.         * </code></pre>  
  336.                     * @param {String} obj 待获取的存储数据相关配置，支持单个对象传入，同样也支持多个对象封装的数组格式  
  337.                     * @config {String} key 待存储数据的key  
  338.                     * @return {String} 本地存储的数据，传入为单个对象时，返回单个对象，获取不到时返回null；传入为数组时，返回为数组  
  339.                     */  
  340.        get : function(obj){  
  341.                             //获取某一个本地存储  
  342.                             var_get_ = function(config){  
  343.                                      //结果       
  344.                                      varresult = null;  
  345.                                      if(typeofconfig === "string") config = {key : config};  
  346.                                      //key校验  
  347.                                      if(!_isValidKey(config.key)){return result;}  
  348.                                       
  349.                                      //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  350.                                      if(_isSupportLocalStorage){  
  351.                                                result= window.localStorage.getItem(config.key);  
  352.                                                //过期时间判断，如果过期了，则移除该项  
  353.                                                if(result){  
  354.                                                         varexpires = window.localStorage.getItem(config.key + ".expires");  
  355.                                                         result= {  
  356.                                                                  value: result,  
  357.                                                                  expires: expires ? new Date(expires) : null  
  358.                                                         };  
  359.                                                         if(result&& result.expires && result.expires < new Date()) {  
  360.                                                                  result= null;  
  361.                                                                  window.localStorage.removeItem(config.key);  
  362.                            window.localStorage.removeItem(config.key + ".expires");  
  363.                                                         }  
  364.                                                }  
  365.                                      }else if(_isSupportUserData) { //IE7及以下版本，采用UserData方式  
  366.                                                //这里不用单独判断其expires，因为UserData本身具有这个判断  
  367.                                                result= _getItem(config);  
  368.                                                if(result){  
  369.                                                         result= { value : result };  
  370.                                                }  
  371.                                      }  
  372.                                       
  373.                                      returnresult ? result.value : null;  
  374.                             };  
  375.                              
  376.                             varrst = null;  
  377.                             //判断传入的参数是否为数组  
  378.                             if(obj&& obj.constructor === Array && obj instanceof Array){  
  379.                                      rst= [];  
  380.                                      for(vari = 0,len = obj.length;i < len;i++){  
  381.                                                rst.push(_get_(obj[i]));  
  382.                                      }  
  383.                             }elseif(obj){  
  384.                                      rst= _get_(obj);  
  385.                             }  
  386.                             returnrst;  
  387.        },  
  388.          
  389.        /**  
  390.         * 移除某一项本地存储的数据  
  391.         * <pre><code>  
  392.                     * //删除一个本地存储项  
  393.                     * qext.LocalStorage.remove({  
  394.                     *             key: "username"  
  395.                     * });  
  396.                     * //删除多个本地存储项目 *  
  397.                     * qext.LocalStorage.remove([{  
  398.                     *             key: "username"  
  399.                     * },{  
  400.                     *             key: "password"  
  401.                     * },{  
  402.                     *             key: "sex"  
  403.                     * }]);  
  404.         * </code></pre>  
  405.                     * @param {String} obj 待移除的存储数据相关配置，支持移除某一个本地存储，也支持数组形式的批量移除  
  406.                     * @config {String} key 待移除数据的key  
  407.                     * @return 无  
  408.         */  
  409.        remove : function(obj){  
  410.                             //移除某一项本地存储的数据  
  411.                             var_remove_ = function(config){  
  412.                                      //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  413.                                      if(_isSupportLocalStorage){  
  414.                                                window.localStorage.removeItem(config.key);  
  415.                                                window.localStorage.removeItem(config.key+ ".expires");  
  416.                                      }else if(_isSupportUserData){ //IE7及以下版本，采用UserData方式  
  417.                                                _removeItem(config);  
  418.                                      }  
  419.                             };  
  420.                              
  421.                             //判断传入的参数是否为数组  
  422.                             if(obj&& obj.constructor === Array && obj instanceof Array){  
  423.                                      for(vari = 0,len = obj.length;i < len;i++){  
  424.                                                _remove_(obj[i]);  
  425.                                      }  
  426.                             }elseif(obj){  
  427.                                      _remove_(obj);  
  428.                             }  
  429.        },  
  430.          
  431.        /**  
  432.         * 清除所有本地存储的数据  
  433.         * <pre><code>  
  434.         * qext.LocalStorage.clearAll();  
  435.         * </code></pre>  
  436.         */  
  437.        clearAll : function(){  
  438.            //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  439.            if(_isSupportLocalStorage) {  
  440.                 window.localStorage.clear();  
  441.            } else if(_isSupportUserData) { //IE7及以下版本，采用UserData方式  
  442.                 _clearAll();  
  443.            }  
  444.        },  
  445.          
  446.        //保存单个对象到本地  
  447.        save:function(StudentID,ExamID,QuestionID,ExamAnswer){  
  448.        qext.LocalStorage.set({  
  449.           key : StudentID+ExamID+QuestionID,  
  450.           value : "{  StudentID’: ‘"+StudentID+"’,‘ExamID’: ‘"+ExamID+"’, ‘QuestionID’:‘"+QuestionID+"’,‘ExamAnswer’: ‘"+ExamAnswer+"’}",  
  451.           expires : 3600 * 1000  /*单位：ms*/  
  452.        });  
  453.        },  
  454.        /**  
  455.         * 获取所有的本地存储数据对应的key  
  456.         * <pre><code>  
  457.         * var keys = qext.LocalStorage.getAllKeys();  
  458.         * </code></pre>  
  459.         * @return {Array} 所有的key  
  460.         */  
  461.        getAllKeys : function(){  
  462.            var result = [];  
  463.            //支持本地存储的浏览器：IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+  
  464.            if(_isSupportLocalStorage) {  
  465.                 var key;  
  466.                 for(var i = 0,len =window.localStorage.length;i < len;i++){  
  467.                     key = window.localStorage.key(i);  
  468.                    if(!/.+\.expires$/.test(key)) {  
  469.                         result.push(key);  
  470.                     }  
  471.                 }  
  472.            } else if(_isSupportUserData) { //IE7及以下版本，采用UserData方式  
  473.                 result = _getAllKeys();  
  474.            }  
  475.              
  476.            return result;  
  477.        }  
  478.    };  
  479.    
  480. })();  



 

挺佩服封装这个代码的人，感觉无论从编程习惯还是代码的质量上都值得每一个人学习，所以，推荐一下。

到此，所有的本地存储的问题都解决了，又是完美的一天！

下面是一个完整的程序：我是完整的程序

兼容多浏览器的本地存储

标签：

原文地址：http://www.cnblogs.com/shouce/p/5078153.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！