用JavaScript实现本地缓存

下面是我花了一天的时间写的一段JavaScript代码，把memory.js和test.htm放到同一个文件夹下，在网页中浏览test.htm查看效果。欢迎提出意见和批评！

momory.js
  1 function window.onerror()
  2 {
  3  return false;
  4 }
  5 function pageCache(prefix)
  6 {
  7  this.prefix = (typeof(prefix)!="string")?"":"prefix_" + prefix + "_";
  8  this.setCookie = function(name,value)
  9  {
 10   var Days = 1; 
 11   var exp  = new Date();
 12   exp.setTime(exp.getTime() + Days*24*60*60*1000);
 13   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
 14  }
 15  this.getCookie = function(name)
 16  {
 17   var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
 18   if(arr != null) return unescape(arr[2]); return null;
 19  }
 20  this.delCookie = function(name)
 21  {
 22   var exp = new Date();
 23   exp.setTime(exp.getTime() - 1);
 24   var cval=this.getCookie(name);
 25   if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
 26  }
 27  
 28  this.setValue = function(obj)
 29  {
 30   var tmpObj = document.getElementsByName(obj.name);
 31   if(obj.type=="text" || obj.type=="checkbox" || obj.type=="textarea")
 32   {
 33    for(var i=0;i<tmpObj.length;i++)
 34    {
 35     if(obj==tmpObj[i])
 36     {
 37      this.setCookie(this.prefix + obj.form.name + "_" + obj.name + "_" + i.toString(),(obj.type=="checkbox")?obj.checked:obj.value);
 38      break;
 39     }
 40    }
 41   }
 42   else if(obj.type=="radio" || obj.type=="select-one")
 43   {
 44    this.setCookie(this.prefix + obj.form.name + "_" + obj.name,obj.value);
 45   }
 46  }
 47  
 48  //清除页面缓存
 49  this.clearCache = function()
 50  {
 51   var tmpObj;
 52   var tmpName;
 53   for(var i=0;i<document.forms.length;i++)
 54   {
 55    for(var j=0;j<document.forms[i].elements.length;j++)
 56    {
 57     tmpObj = document.forms[i].elements[j];
 58     if(tmpObj.type=="text" || tmpObj.type=="checkbox" || tmpObj.type=="textarea")
 59     {
 60      for(var k=0;k<document.getElementsByName(tmpObj.name).length;k++)
 61      {
 62       tmpName = this.prefix + document.forms[i].name + "_" + tmpObj.name + "_" + k.toString();
 63       if(this.getCookie(tmpName)!=null) this.delCookie(tmpName);
 64      }
 65     }
 66     else if(tmpObj.type=="radio" || tmpObj.type=="select-one")
 67     {
 68      tmpName = this.prefix + document.forms[i].name + "_" + tmpObj.name;
 69      if(this.getCookie(tmpName)!=null) this.delCookie(tmpName);
 70     }
 71    }
 72   }
 73  }
 74  
 75  // 加载页面缓存
 76  this.loadCache = function()
 77  {
 78   var tmpValue;
 79   var tmpObj;
 80   for(var i=0;i<document.forms.length;i++)
 81   {
 82    for(var j=0;j<document.forms[i].elements.length;j++)
 83    {
 84     tmpValue = null;
 85     tmpObj = document.forms[i].elements[j];
 86     if(tmpObj.type=="text" || tmpObj.type=="checkbox" || tmpObj.type=="textarea")
 87     {
 88      for(var k=0;k<document.getElementsByName(tmpObj.name).length;k++)
 89      {
 90       if(document.forms[i].elements[j]==document.getElementsByName(tmpObj.name)[k])
 91       {
 92        tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name + "_" + k.toString());
 93        break;
 94       }
 95      }
 96      if(tmpValue!=null)
 97      {
 98       if(tmpObj.type=="checkbox")
 99       {
100        tmpObj.checked = (tmpValue=="true")?true:false;
101       }
102       else
103       {
104        tmpObj.value = tmpValue;
105       }
106      }
107     }
108     else if(tmpObj.type=="radio")
109     {
110      tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name);
111      if(tmpValue!=null)
112      {
113       if(tmpObj.value==tmpValue) tmpObj.checked = true;
114      }
115     }
116     else if(tmpObj.type=="select-one")
117     {
118      tmpValue = this.getCookie(this.prefix + document.forms[i].name + "_" + tmpObj.name);
119      if(tmpValue!=null)
120      {
121       for(var k=0;k<tmpObj.length;k++)
122       {
123        if(tmpObj.options[k].value == tmpValue)
124        {
125         tmpObj.options[k].selected = true;
126         break;
127        }
128       }
129      }
130     }   
131    }
132   }
133  }
134 }
135 // 绑定控件事件
136 function BindEvent(CacheObj)
137 {
138  var arr;
139  var i;
140  arr = document.getElementsByTagName("INPUT");
141  for(i=0;i<arr.length;i++)
142  {
143   if(arr[i].type=="text")
144   {
145    arr[i].onblur = function() {CacheObj.setValue(this);}
146   }
147   else if(arr[i].type=="radio" || arr[i].type=="checkbox")
148   {
149    arr[i].onclick = function() {CacheObj.setValue(this);}
150   }
151  }
152  
153  arr = document.getElementsByTagName("TEXTAREA");
154  for(i=0;i<arr.length;i++)
155  {
156   arr[i].onblur = function() {CacheObj.setValue(this);}
157  }
158  
159  arr = document.getElementsByTagName("SELECT");
160  for(i=0;i<arr.length;i++)
161  {
162   arr[i].onblur = function() {CacheObj.setValue(this);}
163  }
164 }
test.htm 
 1 <html>
 2  <head>
 3  <meta http-equiv="Content-Type" content="text/html; charsetValue=gb2312">
 4  <title>本地缓存演示</title>
 5 </head>
 6 <body onLoad="InitCache()">
 7 <script language="javascript" src="memory.js"></script>
 8 <script type="text/javascript" language="javascript">
 9 var cache = new pageCache("123");//123用于本地缓存的标识
10 function InitCache()
11 {
12  cache.loadCache();//加载缓存
13  BindEvent(cache);//给页面控件绑定事件，用于记录缓存
14 }
15 function DelCache()
16 {
17  if(cache!=null) cache.clearCache();
18 }
19 </script>
20 <form name="form1" method="post" action="">
21  <p>
22   <input type="text" name="textfield">
23 </p>
24  <p>
25   <input type="text" name="textfield">
26  </p>
27  <p>
28   <input type="text" name="textfield2">
29  </p>
30  <p>
31   <input name="radiobutton" id="radiobutton" type="radio" value="1"><label for="radiobutton">abcdefg</label>
32   <input name="radiobutton" type="radio" value="2">
33   <input name="radiobutton" type="radio" value="3">
34  </p>
35  <p>
36   <input type="checkbox" name="checkbox" value="checkbox">
37   <input type="checkbox" name="checkbox" value="checkbox">
38   <input type="checkbox" name="checkbox" value="checkbox">
39  </p>
40  <p>
41   <textarea name="textarea" cols="120" rows="8"></textarea>
42  </p>
43  <p>
44   <select name="select">
45    <option value="1">aa</option>
46    <option value="2">bb</option>
47    <option value="3">cc</option>
48    <option value="4">dd</option>
49   </select>
50  </p>
51  <p>  
52   <input type="button" name="Submit" value="清除缓存" onClick="DelCache();location.reload()">
53  </p>
54 </form>
55 </body>
56 </html>
 1 <html>
 2  <head>
 3 <meta http-equiv="Content-Type" content="text/html; charsetValue=gb2312">
 4 <title>本地缓存演示</title>
 5 </head>
 6 <body onLoad="InitCache()">
 7 <script language="javascript" src="memory.js"></script>
 8 <script type="text/javascript" language="javascript">
 9 var cache = new pageCache("123");//123用于本地缓存的标识
10 function InitCache()
11 {
12  cache.loadCache();//加载缓存
13  BindEvent(cache);//给页面控件绑定事件，用于记录缓存
14 }
15 function DelCache()
16 {
17  if(cache!=null) cache.clearCache();
18 }
19 </script>
20 <form name="form1" method="post" action="">
21  <p>
22   <input type="text" name="textfield">
23 </p>
24  <p>
25   <input type="text" name="textfield">
26  </p>
27  <p>
28   <input type="text" name="textfield2">
29  </p>
30  <p>
31   <input name="radiobutton" id="radiobutton" type="radio" value="1"><label for="radiobutton">abcdefg</label>
32   <input name="radiobutton" type="radio" value="2">
33   <input name="radiobutton" type="radio" value="3">
34  </p>
35  <p>
36   <input type="checkbox" name="checkbox" value="checkbox">
37   <input type="checkbox" name="checkbox" value="checkbox">
38   <input type="checkbox" name="checkbox" value="checkbox">
39  </p>
40  <p>
41   <textarea name="textarea" cols="120" rows="8"></textarea>
42  </p>
43  <p>
44   <select name="select">
45    <option value="1">aa</option>
46    <option value="2">bb</option>
47    <option value="3">cc</option>
48    <option value="4">dd</option>
49   </select>
50  </p>
51  <p>  
52   <input type="button" name="Submit" value="清除缓存" onClick="DelCache();location.reload()">
53  </p>
54 </form>
55 </body>
56 </html>
posted @ 2011-06-01 11:04  ╰☆Everytime I try to flying  阅读(513)  评论(0)  编辑  收藏  举报