localStorage 以及UserData[IE6 IE7]使用

Posted cxchanpin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStorage 以及UserData[IE6 IE7]使用相关的知识，希望对你有一定的参考价值。

说在前头：


UserData:属于IE6 IE7的老东西。麻烦且体验差，暂且不表

localStorage 属于HTML5的东西，兼容IE8以及其它W3C标准的主流浏览器。所以尽可能的具体解说

注意：

IE下须要server环境。能够使用webstorm编辑器来预览，否则会报错

相关文档：

猎聘：http://www.css88.com/archives/3717

博客园：http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

博客园2：http://www.cnblogs.com/winterIce/archive/2011/09/16/2179281.html

教程：

0-----------------------------------------------------------------》相关属性方法

1-------------------------------------------------------------------》JavaScript userData localStorage的兼容

2-------------------------------------------------------------------》html 1

3.----------------------------------------------------------------------------------->>storage 跨浏览器通讯[IE8不支持]

------------------------------------------------------------------------------------------------------------------------------------------------------------


locaStorage:

增：

ocalStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"

查：
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值

删：
localStorage.removeItem("c");//清除c的值

事件：

if(window.addEventListener)

{
        window.addEventListener("storage",handle_storage,false);
    

}

else if(window.attachEvent)

{
        window.attachEvent("onstorage",handle_storage);
}
function handle_storage(){
     alert(LocalStorage.getItem("hehe"))
 }

清除全部：

localStorage.clear();

localStorage是一个集合。有length属性。能够通过遍历来获取相应的值：

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键。再用getItem()方法获得相应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

******************************我是切割线~.~********************************************


实例localStorage.js：[兼容IE6 7，用面向对象的方法写~~不知道这样表达是不是正确]：

//userData,做IE7 6 兼容
var UserData = { //新建一个UserData对象来做IE6 7的兼容,注意第一个字母大写
    userData : null,//用来推断是否有userData属性，也就是推断是否是IE6 7，或者说是否支持userData属性
    name : location.hostname,
    init:function(){
        if (!UserData.userData) {
            try {
                UserData.userData = document.createElement(\'INPUT\');
                UserData.userData.type = "hidden";
                UserData.userData.style.display = "none";
                UserData.userData.addBehavior ("#default#userData");
                document.body.appendChild(UserData.userData);
                var expires = new Date();
                expires.setDate(expires.getDate()+365);
                UserData.userData.expires = expires.toUTCString();
            } catch(e) {
                return false;
            }
        }
        return true;
    },


    setItem : function(key, value) {//设置缓存
        if(UserData.init()){
            UserData.userData.load(UserData.name);
            UserData.userData.setAttribute(key, value);
            UserData.userData.save(UserData.name);
        }
    },


    getItem : function(key) {//获取缓存
        if(UserData.init()){
            UserData.userData.load(UserData.name);
            return UserData.userData.getAttribute(key)
        }
    },


    remove : function(key) {  //删除缓存
        if(UserData.init()){
            UserData.userData.load(UserData.name);
            UserData.userData.removeAttribute(key);
            UserData.userData.save(UserData.name);
        }
    },

clear:function(){//清除全部缓存
           UserData.userData.load(UserData.name);
           var now = new Date();
           now = new Date(now.getTime()-1);
           UserData.userData.expires = now.toUTCString();
           UserData.userData.save(UserData.name);
       }
};


//做W3C兼容  以及IE6 7的兼容，这里的代码是我自己參照上面的代码写的。原理一样
var LocalStorage={//新建一个LocalStorage对象
    localStorage: null,//用来推断是否支持localStorage
   setItem:function(key,value) //设置缓存
   {
       if(!LocalStorage.localStorage)//假设支持localStorage。就使用它
       {
           localStorage.setItem(key,value)
       }
       else{     //否则使用IE6 7的userData方法，也就是上面我们写的那个UserData对象的方法,以下的代码原理一样，就不备注了
           UserData.setItem(key,value)
       }
   },
    getItem:function(key)
    {
        if(!LocalStorage.localStorage)
        {
       
          return localStorage.getItem(key)
        }
        else
        {
             return UserData.setItem(key);
        }


    },
    removeItem:function(key)
    {
        if(!LocalStorage.localStorage)
        {
            return  localStorage.removeItem(key)
        }
        else
        {
             return UserData.removeItem(key);
        }


    },
    clear:function()
    {
        if(!localStorage)
        {
            return  localStorage.clear();
        }
        else{
            return UserData.clear()
        }


    }
};
******************************我是切割线~.~********************************************
html：


demo.html


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <label for="">商品类型：<input type="text" name="name"/></label>
    <label for="">标题：<input type="text" name="title"/></label>
    <label  for="">价格：<input type="text" name="price"/></label>
    <label for=""><input type="button" value="提交" id="submit"/></label>
</form>
<script src="locaStorage.js"></script>
<script src="../jquery.js"></script>
<script>
   $(function(){
     var names=$("input[name=\'name\']");
     var tit=$("input[name=\'title\']");
     var price=$("input[name=\'price\']");
     var submit=$("#submit");


       submit.click(function(){
           //保存缓存
           LocalStorage.setItem("name",names.val());
           LocalStorage.setItem("title",tit.val());
           LocalStorage.setItem("price",price.val());
           window.location.href="demo2.html";
           //读取缓存
       });
       //读取缓存
       names.attr("value",LocalStorage.getItem("name"));
       tit.attr("value",LocalStorage.getItem("title"));
       price.attr("value",LocalStorage.getItem("price"));


   })
</script>
</body>
</html>

图示：

无论你怎样刷新。都会保存数据


******************************我是切割线~.~********************************************

demo2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <h1>你购买的商品例如以下：</h1>
    <label for="">商品类型：<input type="text" name="name"/></label>
    <label for="">标题：<input type="text" name="title"/></label>
    <label  for="">价格：<input type="text" name="price"/></label>
</form>
<script src="locaStorage.js"></script>
<script src="../jquery.js"></script>
<script>
    $(function(){
        var names=$("input[name=\'name\']");
        var tit=$("input[name=\'title\']");
        var price=$("input[name=\'price\']");
        names.attr("value",LocalStorage.getItem("name"));
        tit.attr("value",LocalStorage.getItem("title"));
        price.attr("value",LocalStorage.getItem("price"));


    })
</script>
</body>
</html>


图示：

及时跳转到了新页面，还是能够获取到数据



以上是关于localStorage 以及UserData[IE6 IE7]使用的主要内容，如果未能解决你的问题，请参考以下文章

localStorage.getItem

sessionStorage localStorage 与cookie 的异同点

html5 localstorage 怎么取存储条数

localStorage和sessionStorage的使用方法和一些特性介绍

IE中的userData

localStorage和sessionStorage