當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用JavaScript实现本地缓存
生活随笔
收集整理的這篇文章主要介紹了
用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" id="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>
轉載于:https://www.cnblogs.com/lancee/archive/2012/01/04/2312282.html
總結
以上是生活随笔為你收集整理的用JavaScript实现本地缓存的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces Round #20
- 下一篇： JavaScript操作Table