☰

jquery.formLocalStorage

自动保存表单数据

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/454871/1117300/jqueryformLocalStorage.js 

  1. /*!
  2.  * jQuery Form Local Storage Plugin v0.1
  3.  * http://git.oschina.net/since1986/jquery_form_local_storage
  4.  * 
  5.  * Copyright since1986
  6.  * Released under the MIT license
  7.  */
  8.  (function($) {
  9.     $.fn.formLocalStorage = function(options) {
  10.     	
  11.     	var form_selector = this.selector;
  12.     	var input_selector = form_selector + " :text, " + form_selector + " :checkbox, " + form_selector + " :radio, " + form_selector + " select, " + form_selector + " textarea, " + form_selector + " [type='date']";
  13.     	
  14.     	if(options.debug){ console.debug(this); }
  15.     	
  16.     	//插件选项
  17.     	var options = $.extend({
  18.     		storage_name_perfix : ( this.context.URL + form_selector + "@" ), //暂存的命名前缀
  19.     		storage_dom_css : {"font-style":"oblique"}, //暂存内容的css(用于区分原始内容与暂存内容)
  20.     		load_ready_callback : function(){}, //暂存内容加载完毕回调
  21.     		save_ready_callback : function(){}, //暂存内容保存完毕回调
  22.     		remove_ready_callback : function(){}, //暂存内容删除完毕回调
  23.     		debug : false, //调试模式
  24.         },
  25.         options || {});
  26.     	
  27.     	if(options.debug){	console.debug("storage_name_perfix: " + options.storage_name_perfix); }
  28.     	
  29.     	//表单加载完毕后从localStorage中载入暂存的表单内容
  30.     	this.ready(function(){
  31.     		
  32.     		var storage_count = 0;
  33.     		$(input_selector).each(function(){
  34.     			var storage_key = options.storage_name_perfix + this.name;
  35.     			var storage_value = localStorage.getItem(storage_key);
  36.     			if(storage_value != undefined && storage_value != null){
  37.     				$(this).val(storage_value);
  38.     				$(this).css(options.storage_dom_css);
  39.     				if(options.debug){ console.debug("Load from localStorage [" + storage_key + " : " + storage_value + "]"); };
  40.     				storage_count++;
  41.     			}
  42.     		});
  43.     		if(storage_count > 0) { options.load_ready_callback(); }
  44.     	});
  45.     	
  46.     	//监控表单内容变化并存入localStorage FIXME 动态写入的内容监控不到
  47.     	this.ready(function(){
  48.     		$(input_selector).change(function(){
  49.     			
  50.     			if(this.value != undefined && this.value != null){
  51.     				var storage_key = options.storage_name_perfix + this.name;
  52.     				var storage_value = this.value;
  53.     				localStorage.setItem(storage_key, storage_value);
  54.     				$(this).css(options.storage_dom_css);
  55.     				if(options.debug){ console.debug("Save to localStorage [" + storage_key + " : " + storage_value + "]"); };
  56.     			}
  57.     			options.save_ready_callback();
  58.     		});
  59.     	});
  60.     	
  61.     	//表单提交时自动清空此表单所有暂存内容
  62.     	this.submit(function(){
  63.     		$(input_selector).each(function(){
  64.     			var storage_key = options.storage_name_perfix + this.name;
  65.     			localStorage.removeItem(storage_key);
  66.     			if(options.debug){ console.debug("Remove from localStorage [" + storage_key + "]"); };
  67.     		});
  68.     		options.remove_ready_callback();
  69.     	});
  70.     	
  71.     	return this;
  72.     };
  73. })(jQuery);