用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实现本地缓存相关推荐

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的下面的代 ...
php缓存远程图片接口,Android_Android远程获取图片并本地缓存，对于客户端——服务器端应用 - phpStudy...
Android远程获取图片并本地缓存对于客户端--服务器端应用,从远程获取图片算是经常要用的一个功能,而图片资源往往会消耗比较大的流量,对应用来说,如果处理不好这个问题,那会让用户很崩溃,不知不觉手 ...
客户端缓存（http缓存和本地缓存）
原文链接:https://juejin.im/post/6844904194680291342 http缓存 http缓存用于客户端储存一些不经常变化的静态文件(图片.css.js等).分为强制缓存和 ...
Openlayers4+servlet实现切片的本地缓存
概述本文实现的是结合Openlayers4和java servlet实现公网资源切片的本地缓存. 优点相比较其他下载利器,本实例具有以下优点: 1. 实现简单,操作简单: 2. 不会出现IP被封: ...
vue2知识点：浏览器本地缓存
文章目录 3.21浏览器本地缓存 3.21.1localStorage 举例:写一个简单的针对本地存储增删改查的案例 3.21.2sessionStorage方法同localStorage一样本人其 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
php缓存数据到本地缓存,本地缓存localStorage的使用方法
本篇文章的使用方法来自于实际开发,详细介绍AppCan手机框架本地缓存localStorage的使用方法. 在手机应用中,存储本地数据是必不可少的功能,例如我们可以在手机中存储用户自定义设置.传递数据 ...
万字详解本地缓存之王 Caffeine
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来自:r6d.cn/UXR4 概要 Caffeine[1] ...

用JavaScript实现本地缓存

用JavaScript实现本地缓存

用JavaScript实现本地缓存相关推荐

最新文章

热门文章