├── DataSaver.jquery.json ├── README.md ├── index.html ├── jquery.DataSaver.js └── jquery.DataSaver.min.js /DataSaver.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DataSaver", 3 | "title": "jQuery DataSaver", 4 | "description": "jQuery plugin for save your data from form fields in the web storage.", 5 | "keywords": [ 6 | "data", 7 | "save", 8 | "storage", 9 | "localstorage", 10 | "form", 11 | "fields" 12 | ], 13 | "version": "0.1.2", 14 | "author": { 15 | "name": "Seleznev Alexander", 16 | "email": "absenteg@gmail.com", 17 | "url": "http://whoisabsent.ru" 18 | }, 19 | "licenses": [ 20 | { 21 | "type": "MIT", 22 | "url": "http://www.opensource.org/licenses/mit-license.php " 23 | } 24 | ], 25 | "homepage": "https://github.com/absentik/DataSaver", 26 | "docs": "https://github.com/absentik/DataSaver/wiki", 27 | "bugs": "https://github.com/absentik/DataSaver/issues", 28 | "dependencies": { 29 | "jquery": ">=1.7" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DataSaver 2 | ======= 3 | 4 | ## ABOUT 5 | The jQuery plugin allows you to save data from form fields in the web storage. 6 | 7 | This saves users from a situation when they lost all data entered into the form. This can happen due to a crash browser, disconnection, reload the page, etc. 8 | 9 | ### Browser Support 10 | Plugin is supported in Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4.0+, and Safari 4.0+. 11 | 12 | ## USAGE 13 | DataSaver plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header. 14 | 15 | 
16 | <script src="js/jquery.js"></script>
17 | <script src="js/jquery.DataSaver.js"></script>
18 |
19 | 20 | Select elements whose data you want to save. 21 | 22 | 
<textarea class="saveme"> </textarea>
23 | 24 | After it, call the jQuery DataSaver plugin. 25 | 26 | 
$('.saveme').DataSaver();
27 | 28 | ### Options: 29 | You can pass an options object in plugin init method. 30 | * `timeout` : Automatic save interval data (in milliseconds). If zero, it is not used (Default: `0`); 31 | * `events` : List of events that cause data save. If `undefined` or `''`, it is not used (Default: `change`); 32 | * `keyUrlAttrs` : Array of properties `window.location` object for building key (Default: `["host", "pathname"]`); 33 | * `keyExtra` : Function that return a string that is used for building key (Default: `function() { return ""; }`). 34 | 35 | 
36 | $('.saveme').DataSaver({
37 | 	timeout: 1000, 
38 | 	events: "change keyup",
39 | 	keyUrlAttrs: ["host", "pathname", "search"],
40 | 	keyExtra: function() { 
41 | 		return $('#linkedfield').val(); 
42 | 	}
43 | });
44 |
45 | 46 | ### Methods: 47 | You can call some methods. Just pass their name. 48 | * `save` : Save the data in web storage; 49 | * `load` : Load the data from web storage; 50 | * `remove` : Remove the data from web storage; 51 | * `stop` : Stop the DataSaver. 52 | 53 | 
$('.saveme').DataSaver('remove');
54 | 55 | ### Events: 56 | You can listen DataSaver events. 57 | * `DataSaver_start` 58 | * `DataSaver_stop` 59 | * `DataSaver_save` 60 | * `DataSaver_load` 61 | * `DataSaver_remove` 62 | 63 | You can also get localStorage key (`DataSaver_key`) and value: 64 | 65 | 
66 | $(document).on("DataSaver_save DataSaver_load DataSaver_remove", function(e) {
67 |     console.log(e.type);
68 |     console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
69 |     console.log("");
70 | });
71 |
72 | 73 | ## EXAMPLE 74 | [View example](http://htmlpreview.github.io/?https://github.com/absentik/DataSaver/blob/master/index.html#example_form) 75 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DataSaver - jQuery plugin for save your data 9 | 10 | 11 | 12 | 33 | 34 | 58 | 59 | 60 | 61 |
62 |
63 |

DataSaver

64 |

jQuery plugin for save your data.

65 |
66 | Download 67 | Github Page 68 |
69 |
70 |
71 |

About

72 |

The jQuery plugin allows you to save data from form fields in the web storage.

73 |

This saves users from a situation when they lost all data entered into the form. This can happen due to a crash browser, disconnection, reload the page, etc.

74 |
75 |

Browser Support:

76 |

Plugin is supported in Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4.0+, and Safari 4.0+.

77 |
78 |

Usage

79 |

DataSaver plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

80 | 
 81 | <script src="js/jquery.js"></script>
 82 | <script src="js/jquery.DataSaver.js"></script>
 83 |
84 |
85 |

Select elements whose data you want to save.

86 | 
 87 | <input type="text" id="field" class="saveme" /> 
 88 | <textarea class="saveme"> </textarea>
 89 |
90 |
91 |

After it, call the jQuery DataSaver plugin.

92 | 
 93 | $('.saveme').DataSaver();	
 94 |
95 |
96 |

Options:

97 |

You can pass an options object in plugin init method.

98 | 104 | 
105 | $('.saveme').DataSaver({
106 |     timeout: 1000, 
107 |     events: "change keyup",
108 |     keyUrlAttrs: ["host", "pathname", "search"],
109 |     keyExtra: function() { 
110 |         return $('#linkedfield').val(); 
111 |     }
112 | });
113 |
114 |
115 |
116 |

Methods:

117 |

You can call some methods. Just pass their name.

118 | 124 | 
125 | $('.saveme').DataSaver('remove');
126 |
127 |
128 |
129 |

Events:

130 |

You can listen DataSaver events.

131 | 138 |

You can also get localStorage key (DataSaver_key) and value:

139 | 
140 | $(document).on("DataSaver_save DataSaver_load DataSaver_remove", function(e) {
141 | 	console.log(e.type);
142 | 	console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
143 | 	console.log("");
144 | });
145 |
146 |
147 |
148 |
149 |

Example:

150 |
151 |

Fill and reload the page.

152 |

Input: 153 | 154 | 155 | 156 | 157 | 158 |

159 |

Radio: 160 | One 161 | Two 162 | Three 163 |

164 |

Select: 165 | 172 |

173 |

Multiple select:
174 | 181 |

182 |

Checkbox: 183 | Check 184 | Check 185 | Check 186 |

187 |

Textarea:
188 | 189 |

190 |

191 | 192 | 193 |

194 |

195 |
196 |
197 |
198 |

ABSENT, 2014

199 |
200 | 201 | 202 | -------------------------------------------------------------------------------- /jquery.DataSaver.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery DataSaver plugin 0.1.2 3 | * https://github.com/absentik/DataSaver 4 | * 5 | * Author: Seleznev Alexander (ABSENT) 6 | * Email: absenteg@gmail.com 7 | * Website: http://whoisabsent.ru 8 | * 9 | * Licensed under the MIT license. 10 | * http://www.opensource.org/licenses/mit-license.php 11 | */ 12 | 13 | ;(function($, window, document, undefined){ 14 | 15 | var pluginName = "DataSaver"; 16 | var defaults = { 17 | timeout: 0, 18 | events: "change", 19 | keyUrlAttrs: ["host", "pathname"], 20 | keyExtra: function() { 21 | return ""; 22 | } 23 | } 24 | 25 | function DataSaver(element, options) { 26 | this.element = element; 27 | this._defaults = defaults; 28 | this._name = pluginName; 29 | this.options = $.extend({}, defaults, options); 30 | this.action = typeof options === "string" ? options : "default"; 31 | 32 | this.getkey(); 33 | this.init(); 34 | } 35 | 36 | //Generate and return DataSaver_key for element 37 | DataSaver.prototype.getkey = function() { 38 | var keyName = pluginName + "_key"; 39 | var key = this.element[keyName]; 40 | 41 | if (typeof key === "undefined") { 42 | var url = {}; 43 | $.each(this.options.keyUrlAttrs, function(index, value){ 44 | if (window.location.hasOwnProperty(value)) { 45 | url[value] = window.location[value]; 46 | } 47 | }); 48 | 49 | var node = { 50 | tagName: this.element.tagName, 51 | name: this.element.name 52 | } 53 | if ($(this.element).is(":input")) { 54 | node.type = this.element.type; 55 | } 56 | if (!$(this.element).is(":radio")) { 57 | node.id = this.element.id; 58 | node.className = this.element.className; 59 | } 60 | 61 | key = [pluginName, JSON.stringify(url), JSON.stringify(node), this.options.keyExtra()].join("."); 62 | this.element[keyName] = key; 63 | } 64 | 65 | return key; 66 | }; 67 | 68 | //Load data from localStorage 69 | DataSaver.prototype.load = function() { 70 | var key = this.getkey(); 71 | var val = localStorage[key]; 72 | 73 | if (val != null) { 74 | switch (this.element.tagName) { 75 | case "INPUT": 76 | var type = $(this.element).attr("type").toUpperCase(); 77 | switch (type) { 78 | case "CHECKBOX": 79 | $(this.element).prop('checked', (val === "true")); 80 | break; 81 | 82 | case "RADIO": 83 | $("input[type=radio][name=" + this.element.name + "]" + "[value=" + val + "]").prop('checked', true); 84 | break; 85 | 86 | default: 87 | $(this.element).val(val); 88 | break; 89 | } 90 | break; 91 | 92 | case "SELECT": 93 | val = val.split(','); //for multiple select 94 | $(this.element).val(val); 95 | break; 96 | 97 | case "TEXTAREA": 98 | $(this.element).val(val); 99 | break; 100 | } 101 | } 102 | 103 | return $(this.element).trigger(pluginName + "_load"); 104 | }; 105 | 106 | //Save data in localStorage 107 | DataSaver.prototype.save = function() { 108 | var key = this.getkey(); 109 | var val; 110 | 111 | switch (this.element.tagName) { 112 | case "INPUT": 113 | var type = $(this.element).attr("type").toUpperCase(); 114 | switch (type) { 115 | case "CHECKBOX": 116 | val = $(this.element).prop('checked'); 117 | break; 118 | 119 | case "RADIO": 120 | val = $(this.element).val(); //keys for all radio[name] should match 121 | break; 122 | 123 | default: 124 | val = $(this.element).val(); 125 | break; 126 | } 127 | break; 128 | 129 | case "SELECT": 130 | val = $(this.element).val(); 131 | break; 132 | 133 | case "TEXTAREA": 134 | val = $(this.element).val(); 135 | break; 136 | } 137 | 138 | if (typeof val !== "undefined") { 139 | localStorage[key] = val; 140 | } 141 | 142 | return $(this.element).trigger(pluginName + "_save"); 143 | }; 144 | 145 | //Remove data in localStorage 146 | DataSaver.prototype.remove = function() { 147 | var key = this.getkey(); 148 | localStorage.removeItem(key); 149 | 150 | return $(this.element).trigger(pluginName + "_remove"); 151 | }; 152 | 153 | //Start the DataSaver: load data and bind actions 154 | DataSaver.prototype.start = function() { 155 | var it = this; 156 | this.stop(); 157 | this.load(); 158 | 159 | if (typeof this.options.events !== "undefined" && this.options.events.length > 0) { 160 | this.options.events = this.options.events.split(',').join(' '); 161 | this.element[pluginName + "_events"] = this.options.events; 162 | //$(document.body).on(this.options.events, this.element, function() { 163 | $(this.element).on(this.options.events, function() { 164 | it.save(); 165 | }); 166 | } 167 | 168 | if (typeof this.options.timeout === "number" && this.options.timeout > 0) { 169 | this.element[pluginName + "_timeout"] = setInterval(function() { 170 | it.save(); 171 | }, this.options.timeout); 172 | } 173 | 174 | return $(this.element).trigger(pluginName + "_start"); 175 | }; 176 | 177 | //Stop the DataSaver: unbind actions 178 | DataSaver.prototype.stop = function() { 179 | if (typeof this.element[pluginName + "_events"] !== "undefined") { 180 | $(document.body).off(this.element[pluginName + "_events"]); 181 | } 182 | if (typeof this.element[pluginName + "_timeout"] !== "undefined") { 183 | clearInterval(this.element[pluginName + "_timeout"]); 184 | } 185 | 186 | return $(this.element).trigger(pluginName + "_stop"); 187 | }; 188 | 189 | 190 | DataSaver.prototype.init = function() { 191 | switch (this.action) { 192 | case "load": 193 | return this.load(); 194 | break; 195 | case "save": 196 | return this.save(); 197 | break; 198 | case "remove": 199 | return this.remove(); 200 | break; 201 | case "stop": 202 | return this.stop(); 203 | break; 204 | default: 205 | return this.start(); 206 | break; 207 | } 208 | }; 209 | 210 | 211 | $.fn[pluginName] = function (options) { 212 | if (!('localStorage' in window && window['localStorage'] !== null)) { 213 | $.error("Your browser doesn't support localStorage."); 214 | } 215 | 216 | return this.each(function () { 217 | $.data(this, 'plugin_' + pluginName, new DataSaver(this, options)); 218 | }); 219 | } 220 | 221 | })(jQuery, window, document); 222 | -------------------------------------------------------------------------------- /jquery.DataSaver.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery DataSaver plugin 0.1.2 3 | * https://github.com/absentik/DataSaver 4 | * 5 | * Author: Seleznev Alexander (ABSENT) 6 | * Email: absenteg@gmail.com 7 | * Website: http://whoisabsent.ru 8 | * 9 | * Licensed under the MIT license. 10 | * http://www.opensource.org/licenses/mit-license.php 11 | */ 12 | 13 | ;(function(b,e,g,h){function d(a,c){this.element=a;this._defaults=f;this._name="DataSaver";this.options=b.extend({},f,c);this.action="string"===typeof c?c:"default";this.getkey();this.init()}var f={timeout:0,events:"change",keyUrlAttrs:["host","pathname"],keyExtra:function(){return""}};d.prototype.getkey=function(){var a=this.element.DataSaver_key;if("undefined"===typeof a){var c={};b.each(this.options.keyUrlAttrs,function(a,b){e.location.hasOwnProperty(b)&&(c[b]=e.location[b])});a={tagName:this.element.tagName, 14 | name:this.element.name};b(this.element).is(":input")&&(a.type=this.element.type);b(this.element).is(":radio")||(a.id=this.element.id,a.className=this.element.className);a=["DataSaver",JSON.stringify(c),JSON.stringify(a),this.options.keyExtra()].join(".");this.element.DataSaver_key=a}return a};d.prototype.load=function(){var a=this.getkey(),a=localStorage[a];if(null!=a)switch(this.element.tagName){case "INPUT":switch(b(this.element).attr("type").toUpperCase()){case "CHECKBOX":b(this.element).prop("checked", 15 | "true"===a);break;case "RADIO":b("input[type=radio][name="+this.element.name+"][value="+a+"]").prop("checked",!0);break;default:b(this.element).val(a)}break;case "SELECT":a=a.split(",");b(this.element).val(a);break;case "TEXTAREA":b(this.element).val(a)}return b(this.element).trigger("DataSaver_load")};d.prototype.save=function(){var a=this.getkey(),c;switch(this.element.tagName){case "INPUT":switch(b(this.element).attr("type").toUpperCase()){case "CHECKBOX":c=b(this.element).prop("checked");break; 16 | case "RADIO":c=b(this.element).val();break;default:c=b(this.element).val()}break;case "SELECT":c=b(this.element).val();break;case "TEXTAREA":c=b(this.element).val()}"undefined"!==typeof c&&(localStorage[a]=c);return b(this.element).trigger("DataSaver_save")};d.prototype.remove=function(){var a=this.getkey();localStorage.removeItem(a);return b(this.element).trigger("DataSaver_remove")};d.prototype.start=function(){var a=this;this.stop();this.load();"undefined"!==typeof this.options.events&&0