说在前头：
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-------------------------------------------------------------------》
2-------------------------------------------------------------------》
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>
图示：
及时跳转到了新页面，还是能够获取到数据
