用JavaScript实现本地缓存
用JavaScript实现本地缓存
memory.js
function window.onerror()
{
return false;
}
function pageCache(prefix)
{
this.prefix = (typeof(prefix)!="string")?"":"prefix_" + prefix + "_";
this.setCookie = function(name,value)
{
var Days = 1;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
this.getCookie = function(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
this.delCookie = function(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=this.getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
this.setValue = function(obj)
{
var tmpObj = document.getElementsByName(obj.name);
if(obj.type=="text" || obj.type=="checkbox" || obj.type=="textarea")
{
for(var i=0;i<tmpObj.length;i++)
{
if(obj==tmpObj[i])
{
this.setCookie(this.prefix + obj.form.name + "_" + obj.name + "_" + i.toString(),(obj.type=="checkbox")?obj.checked:obj.value);
break;
}
}
}
else if(obj.type=="radio" || obj.type=="select-one")
{
this.setCookie(this.prefix + obj.form.name + "_" + obj.name,obj.value);
}
}
//清除页面缓存
this.clearCache = function()
{
var tmpObj;
var tmpName;
for(var i=0;i<document.forms.length;i++)
{
for(var j=0;j<document.forms[i].elements.length;j++)
{
tmpObj = document.forms[i].elements[j];
if(tmpObj.type=="text" || tmpObj.type=="checkbox" || tmpObj.type=="textarea")
{
for(var k=0;k<document.getElementsByName(tmpObj.name).length;k++)
{
tmpName = this.prefix + document.forms[i].name + "_" + tmpObj.name + "_" + k.toString();
if(this.getCookie(tmpName)!=null) this.delCookie(tmpName);
}
}
else if(tmpObj.type=="radio" || tmpObj.type=="select-one")
{
tmpName = this.prefix + document.forms[i].name + "_" + tmpObj.name;
if(this.getCookie(tmpName)!=null) this.delCookie(tmpName);
}
}
}
}
// 加载页面缓存
this.loadCache = function()
{
var tmpValue;
var tmpObj;
for(var i=0;i<document.forms.length;i++)
{
for(var j=0;j<document.forms[i].elements.length;j++)
{
tmpValue = null;
tmpObj = document.forms[i].elements[j];
if(tmpObj.type=="text" || tmpObj.type=="checkbox" || tmpObj.type=="textarea")
{
for(var k=0;k<document.getElementsByName(tmpObj.name).length;k++)
{
if(document.forms[i].elements[j]==document.getElementsByName(tmpObj.name)[k])
{
tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name + "_" + k.toString());
break;
}
}
if(tmpValue!=null)
{
if(tmpObj.type=="checkbox")
{
tmpObj.checked = (tmpValue=="true")?true:false;
}
else
{
tmpObj.value = tmpValue;
}
}
}
else if(tmpObj.type=="radio")
{
tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name);
if(tmpValue!=null)
{
if(tmpObj.value==tmpValue) tmpObj.checked = true;
}
}
else if(tmpObj.type=="select-one")
{
tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name);
if(tmpValue!=null)
{
for(var k=0;k<tmpObj.length;k++)
{
if(tmpObj.options[k].value == tmpValue)
{
tmpObj.options[k].selected = true;
break;
}
}
}
}
}
}
}
}
// 绑定控件事件
function BindEvent(CacheObj)
{
var arr;
var i;
arr = document.getElementsByTagName("INPUT");
for(i=0;i<arr.length;i++)
{
if(arr[i].type=="text")
{
arr[i].onblur = function() {CacheObj.setValue(this);}
}
else if(arr[i].type=="radio" || arr[i].type=="checkbox")
{
arr[i].onclick = function() {CacheObj.setValue(this);}
}
}
arr = document.getElementsByTagName("TEXTAREA");
for(i=0;i<arr.length;i++)
{
arr[i].onblur = function() {CacheObj.setValue(this);}
}
arr = document.getElementsByTagName("SELECT");
for(i=0;i<arr.length;i++)
{
arr[i].onblur = function() {CacheObj.setValue(this);}
}
}
test.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charsetValue=gb2312">
<title>本地缓存演示</title>
</head>
<body onLoad="InitCache()">
<script language="javascript" src="memory.js"></script>
<script type="text/javascript" language="javascript">
var cache = new pageCache("123");//123用于本地缓存的标识
function InitCache()
{
cache.loadCache();//加载缓存
BindEvent(cache);//给页面控件绑定事件，用于记录缓存
}
function DelCache()
{
if(cache!=null) cache.clearCache();
}
</script>
<form name="form1" method="post" action="">
<p>
<input type="text" name="textfield">
</p>
<p>
<input type="text" name="textfield">
</p>
<p>
<input type="text" name="textfield2">
</p>
<p>
<input name="radiobutton" type="radio" value="1"><label for="radiobutton">abcdefg</label>
<input name="radiobutton" type="radio" value="2">
<input name="radiobutton" type="radio" value="3">
</p>
<p>
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox" value="checkbox">
</p>
<p>
<textarea name="textarea" cols="120" rows="8"></textarea>
</p>
<p>
<select name="select">
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
</p>
<p>
<input type="button" name="Submit" value="清除缓存" onClick="DelCache();location.reload()">
</p>
</form>
</body>
</html>