網頁離線進行本地存儲使用 Localstorage和userdata 實現，兼容主流瀏覽器

時間 2019-12-04

標籤網頁離線進行本地存儲使用 localstorage userdata 實現兼容主流瀏覽器欄目 HTML 简体版

原文原文鏈接

本文是有借鑑網上前輩們寫過的，以及本身添加和修改了一些方法。我在chrome,firefox，ie8,ie9和ie10兼容模式測試下都可正常運行，放在這裏給須要的人用吧。 javascript

這裏先簡單介紹下localstorage和userdata. html

localstorage是html5特性，支持本地存儲容量很大，而userdata是ie家的。雖然從ie8就開始支持localstorage了，可是須要html在服務器端，若是是本地的話ie是不支持的。而如下代碼是能夠在離線狀況下進行本地存儲的，主要的思路是我將localstorage和userdata都封裝成一樣的方法接口，判斷瀏覽器類型進而使用不一樣的特性實現一樣的接口。這樣作的好處就是，操做的方法不會隨瀏覽器改變而再寫一遍。其實也挺簡單的。 html5

<html>
<head>
<script type="text/javascript">
    
          var Sys = {};

        var ua = navigator.userAgent.toLowerCase();

        var s;

        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :

        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :

        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :

         
        //如下進行測試
          if (Sys.firefox)
          {    
               var local = {
                    setItem:function(nam,val)
                    {
                         window.localStorage.setItem(nam,val);
                    },
                    getItem:function(nam)
                    {
                         return window.localStorage.getItem(nam);
                    },
                    removeItem:function(nam)
                    {
                         window.localStorage.removeItem(nam);
                    },
                    clear:function()
                    {
                         window.localStorage.clear();
                    },
                    length:function()
                    {
                         window.localStorage.length();
                    },
                    key:function(i)
                    {
                         window.localStorage.key(i);
                    }
               }
               document.write('Firefox: ' + Sys.firefox);
          }
              
         
        if (Sys.ie)
          {         
               var  box = document.body || document.getElementsByTagName("head")[0] || document.documentElement;

               UserData_obj = document.createElement('input');

               UserData_obj.type = "hidden";

               UserData_obj.addBehavior ("#default#userData");

               box.appendChild(UserData_obj);

                  //設定對象 

                             

               var local= {

               setItem:function(nam,val)

                    {
                         UserData_obj.load(nam);

                         UserData_obj.setAttribute(nam,val);

                         var d= new Date();

                         d.setDate(d.getDate()+700);

                         UserData_obj.expires=d.toUTCString();

                         UserData_obj.save(nam);

                         UserData_obj.load("local_userdata");

                         var dt=UserData_obj.getAttribute("local_userdata");

                         if(dt==null)dt='';
                        
                         var reg=new RegExp(nam);
                         //判斷nam名字是否存在，不存在添加進去
                         if(!reg.test(dt)){
                              dt=dt+nam+",";
                         }

                         UserData_obj.setAttribute("local_userdata",dt);

                         UserData_obj.save("local_userdata");
                    },

                         //模擬 setItem
              
                    getItem:function(nam)

                    {
                         UserData_obj.load(nam);

                         return UserData_obj.getAttribute(nam);
                    },

               //模擬 getItem

              

               removeItem:function(nam)

                    {
                         UserData_obj.load(nam);

                         clear_userdata(nam);

                         UserData_obj.load("local_userdata");

                         var dt=UserData_obj.getAttribute("local_userdata");

                         var reg=new RegExp(nam+",","g");

                         dt=dt.replace(reg,'');

                         var d= new Date();

                         d.setDate(d.getDate()+700);

                         UserData_obj.expires= d.toUTCString();

                         UserData_obj.setAttribute("local_userdata",dt);

                         UserData_obj.save("local_userdata");

                    },

               //模擬 removeItem

              

               clear:function()
                    {

                         UserData_obj.load("local_userdata");

                         var dts=UserData_obj.getAttribute("local_userdata").split(",");

                         for (var i in dts)
                       {
                              if(dts[i]!='')
                              {
                                   UserData_obj.load(dts[i]);
                                   UserData_obj.removeAttribute(dts[i]);
                                   clear_userdata(dts[i]);
                              }
                         }
                         UserData_obj.load("local_userdata");
                         UserData_obj.removeAttribute("local_userdata");
                         clear_userdata("local_userdata")

                    },

               //模擬 clear();
               clear2:function()
                    {
                         UserData_obj.load("local_userdata");
                        
                         var dts=UserData_obj.getAttribute("local_userdata").split(",");

                         for (var i in dts)
                       {
                              if(dts[i]!='')
                              {
                                   UserData_obj.load(dts[i]);
                                   UserData_obj.removeAttribute(dts[i]);
                                   clear_userdata(dts[i]);
                        
                              }
                         }
                         clear_userdata("local_userdata");
                    },
               each:function()
                    {
                         UserData_obj.load("local_userdata");
                        
                         var dts=UserData_obj.getAttribute("local_userdata").split(",");
                         for(var i in dts){
                              alert(dts[i]);
                         }

                         return dts;
                    }
              

               }

               function clear_userdata(keyname)//將名字爲keyname的變量消除

               {
                    var keyname;

                    var d= new Date();

                    d.setDate(d.getDate()-1);

                    UserData_obj.load(keyname);

                    UserData_obj.expires=d.toUTCString();

                    UserData_obj.save(keyname);

               }
               document.write('IE: ' + Sys.ie);
              
          }

       
         
        if (Sys.chrome){
              
               local = {
                    setItem:function(nam,val)
                    {
                         window.localStorage.setItem(nam,val);
                    },
                    getItem:function(nam)
                    {
                         return window.localStorage.getItem(nam);
                    },
                    removeItem:function(nam)
                    {
                         window.localStorage.removeItem(nam);
                    },
                    clear:function()
                    {
                         window.clear();
                    },
                    length:function()
                    {
                         window.localStorage.length();
                    },
                    key:function(i)
                    {
                         window.localStorage.key(i);
                    }
               }
               document.write('chrome: ' + Sys.chrome);
          }


</script>
</head>
<body>


<script type="text/javascript">
window.local.setItem("name_new1","1liangli")
var name1 = window.local.getItem("name_new1");
document.write(name1);
document.write("</br>");
</script>
</body>
</html>

參考地址： http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html
java