网页离线进行本地存储使用 Localstorage和userdata 实现，兼容主流浏览器

本文是有借鉴网上前辈们写过的，以及自己添加和修改了一些方法。我在chrome,firefox，ie8,ie9和ie10兼容模式测试下均可正常运行，放在这里给需要的人用吧。

这里先简单介绍下localstorage和userdata.

localstorage是html5特性，支持本地存储容量很大，而userdata是ie家的。虽然从ie8就开始支持localstorage了，但是需要html在服务器端，如果是本地的话ie是不支持的。而以下代码是可以在离线情况下进行本地存储的，主要的思路是我将localstorage和userdata都封装成同样的方法接口，判断浏览器类型进而使用不同的特性实现同样的接口。这样做的好处就是，操作的方法不会随浏览器改变而再写一遍。其实也挺简单的。

<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

来源：oschina

链接：https://my.oschina.net/u/1023607/blog/172560

标签

localstorage

userdata

浏览器本地存储