用JavaScript实现本地缓存

   用JavaScript实现本地缓存，把memory.js和test.htm放到同一个文件夹下，在网页中浏览test.htm查看效果。原创作者：

 

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.html

<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>

实现的效果为暂时保存了用户输入的信息，比如需要用户很多资料，多页显示，可以翻页不至于使得前面的填好的资料丢失。但是应该可能跟你浏览器cookie设置有关..保存时间等。