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

转载： http://hi.baidu.com/wanhongnan/blog/item/479cc85810b28f81800a1849.html

转载于:https://www.cnblogs.com/TaoLiQ/archive/2011/06/01/2065561.html