Skip to content

Instantly share code, notes, and snippets.

@visualmotive
Created January 17, 2014 02:05
Show Gist options
  • Save visualmotive/8467280 to your computer and use it in GitHub Desktop.
Save visualmotive/8467280 to your computer and use it in GitHub Desktop.
Save/load forms in localStorage. Useful for filling out forms over and over.
(function(){var f="data-form-local-storage-button-container";if(document.getElementById(f)){jQuery(f).show();return}var e=document.createElement("div"),c=document.getElementsByTagName("body")[0];e.id=f;e.style.position="fixed";e.style.top="0";e.style.right="0";e.style.padding="5px 10px";e.style.zIndex=1001;e.style.fontSize="12px";e.style.color="#222";e.style.backgroundColor="#eee";function a(h,j){var i=document.getElementsByTagName("head")[0],b=false,g=document.createElement("script");g.src=h;g.onload=g.onreadystatechange=function(){if(!b&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){b=true;j();g.onload=g.onreadystatechange=null;i.removeChild(g)}};i.appendChild(g)}if(typeof jQuery!="undefined"){return d()}else{if(typeof $=="function"){otherlib=true}}a("//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",function(){if(typeof jQuery=="undefined"){alert("couldn't load jquery?")}return d()});function d(){e.innerHTML="<button data-local-storage-form-load>Load</button><button data-local-storage-form-save>Save</button><button data-local-storage-form-hide>Hide</button>";c.appendChild(e);function b(g){jQuery("form").each(function(){var h=jQuery(this).attr("name");if(!h){return}g(h,jQuery(this))})}jQuery("[data-local-storage-form-load]").click(function(){b(function(i,h){var g=JSON.parse(localStorage.getItem("data-form-storage:"+i));jQuery.each(g,function(j,k){h.find("[name="+k.name+"]").val(k.val)})})});jQuery("[data-local-storage-form-save]").click(function(){b(function(i,h){var g=[];h.find("input, textarea, select").each(function(){g.push({name:jQuery(this).attr("name"),val:jQuery(this).val()})});localStorage.setItem("data-form-storage:"+i,JSON.stringify(g))})});jQuery("[data-local-storage-form-hid]").click(function(){jQuery(f).hide()})}})();
(function() {
var id = "data-form-local-storage-button-container";
if (document.getElementById(id)) {
jQuery(id).show();
return;
}
var el = document.createElement('div'),
b = document.getElementsByTagName('body')[0];
el.id = id;
el.style.position = 'fixed';
el.style.top = '0';
el.style.right = '0';
el.style.padding = '5px 10px';
el.style.zIndex = 1001;
el.style.fontSize = '12px';
el.style.color = '#222';
el.style.backgroundColor = '#eee';
// more or less stolen form jquery core and adapted by paul irish
function getScript(url, success){
var head = document.getElementsByTagName('head')[0],
done = false,
script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done = true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
if (typeof jQuery != 'undefined') {
return render();
} else if (typeof $ == 'function') {
otherlib = true;
}
getScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
if (typeof jQuery == 'undefined') {
alert("couldn't load jquery?");
}
return render();
});
function render() {
el.innerHTML = "<button data-local-storage-form-load>Load</button>" +
"<button data-local-storage-form-save>Save</button>" +
"<button data-local-storage-form-hide>Hide</button>";
b.appendChild(el);
function eachForm(callback) {
jQuery("form").each(function() {
var n = jQuery(this).attr("name");
if (!n) {
return;
}
callback(n, jQuery(this));
});
}
jQuery("[data-local-storage-form-load]").click(function() {
eachForm(function(n, f) {
var data = JSON.parse(localStorage.getItem("data-form-storage:" + n));
jQuery.each(data, function(i, entry) {
f.find("[name=" + entry.name + "]").val(entry.val);
});
});
});
jQuery("[data-local-storage-form-save]").click(function() {
eachForm(function(n, f) {
var data = [];
f.find("input, textarea, select").each(function() {
data.push({name: jQuery(this).attr("name"), val: jQuery(this).val()});
});
localStorage.setItem("data-form-storage:" + n, JSON.stringify(data));
});
});
jQuery("[data-local-storage-form-hid]").click(function() { jQuery(id).hide(); });
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment