网页离线进行本地存储使用 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