使用localStorage实现对表单历史输入的存储与取值，可应用于登录、注册以及其他大量表单输入的模块，可记录input、select、textarea等任何表单的输入值

需要使用jquery，这里是jquery在线引用地址：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

在页面复制以下代码即可使用，实现对表单历史输入的存储与取值，简化用户输入操作

var fn = function(){};
fn.prototype={
	//检测浏览器可否使用localStorage
	storeCapable : function(){
		try{
			window.localStorage.setItem('localStorage', 'capable');
	        window.localStorage.removeItem('localStorage');
	        return true;
		}catch(e){
			return false;
		}
	},

	//storageName string 可用来区分页面，防止数据因id名相同而被覆盖
	//dataFormat 字符串数组 定义数据包含的属性
	//selectors 字符串数组 定义选择器
	storeFunc : function(storageName , dataFormat , selectors){
		var _this = this;
		if(_this.storeCapable()){

			var storeObj = {}; 
			var storeArr = [];

			//循环dom元素
			for (var i = selectors.length - 1; i >= 0; i--) {
				storeObj[selectors[i]] = {};
				
				var thisEle = $(this.currDoc).find(selectors[i]);
				
				//排除dom中没有对应元素的情况，防止报thisEle.get(0)未定义错误
				if(thisEle.length == 0){
					continue;
				}
				
				//循环dom元素的属性
				for (var j = dataFormat.length - 1; j >= 0; j--) {
					var key = dataFormat[j];
					storeObj[selectors[i]][key] = thisEle.get(0)[key] ? thisEle.get(0)[key] : thisEle.attr(key);
				}

				storeArr.push(storeObj);
				storeObj={};
			}

			var storeString = JSON.stringify(storeArr);
			
			localStorage.setItem(storageName,storeString);
		}else{
			console.log('您的浏览器不支持localStorage');
		}
	},

	//返回localStorage中的值，JSON对象
	fetchFunc : function(storageName){
		var _this = this;
		if(_this.storeCapable()){
			var stores = localStorage.getItem(storageName);
			if(stores != '' && stores != undefined){
				return JSON.parse(stores);
			}
			return {};
		}else{
			console.log('您的浏览器不支持localStorage');
		}
	},

	//根据表单元素的id，循环加载localStorage中的数据
	renderContent : function(storageName){
		var storageData = storeTool.fetchFunc(storageName);

		for (var i = storageData.length - 1; i >= 0; i--) {
			for(selector in storageData[i]){
				for(attr in storageData[i][selector]){
					$(this.currDoc).find(selector).attr(attr,storageData[i][selector][attr]);
				}
			}
		}
	},

	//初始化当前操作的dom对象，可通过$(iframe).contentWindow获取，即可操作iframe中的表单存储
	initDoc : function(obj){
		if(obj && obj.document){
			this.currDoc = obj.document;
		}
	},

	currDoc:window.document
};

在需要使用的时候定义该方法的实例：

var storeTool = new fn();

然后就可以使用了，示例：

1、存值：

//获取要存储的表单元素的选择器，保存为数组。最好是id，因为将作为每个表单数据的唯一标识，防止数据覆盖存取
var inputArr = [];
$('input,select').each(function(index,ele){
    inputArr.push('#'+$(ele).attr(id));//保存id值
});

//['value','checked']是要保存的值。这里写两个，是指所有表单元素（inputArr中的元素）的value值、checked值
storeTool.storeFunc('consign-edit',['value','checked'],inputArr);

2、取值并渲染：

//根据localStorage中的key渲染出对应的表单数据 
storeTool.renderContent('consign-edit');

注：在保存时，只能通过表单元素的id值作为数据的唯一标识，是有局限性的。而且每次保存都要定义存储哪些表单和哪些属性值，这一点虽然提高了存储的灵活性，但增加了操作。

以上两点，如有更好的解决方式，请大牛在下方留言，感谢感谢。

使用localStorage实现对表单历史输入的存储与取值，可应用于登录、注册以及其他大量表单输入的模块，可记录input、select、textarea等任何表单的输入值

猜你喜欢