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]使用

最新文章

热门文章