// CAPTURE FORM DATA //take whatever the input field is, put its value in storage on keyup $('input, datalist, keygen, optgroup, select, textarea').keyup(function(event){ var name; var value; var name = $(this).attr("name"); var value = $(this).val(); localStorage.setItem(name, value); currentval = $(this).val(); outputs = $('output[name="form output"]').html; $('output[name="form output"]').html("<p>" + currentval + "</p>" ); }); //use this for the input slider - since it doesn't use the keyboard $('[type="range"]').mousemove(function(event){ var name; var value; var name = $(this).attr("name"); var value = $(this).val(); localStorage.setItem(name, value); currentval = $(this).val(); outputs = $('output').html; $('output[name="form output"]').html("<p>" + currentval + "</p>" ); }); //load the values into input forms $('input').each(function(event) { var fieldkey = $(this).attr("name"); var fieldval = localStorage.getItem(fieldkey); $(this).val(fieldval); }); //LOOK FOR CURRENT ITEMS var items = localStorage.length; //just find out the quantity of items var keys = new Array(); //make an array out of the local storage items for (i=0; i < items; i++) { keys.push(localStorage.key(i)); }; //OUTPUT THE VALUES (DEMO ONLY) //output the list of keys somewhere var keylist = $('#keylist'); for (i=0; i < items; i++) { $('#keylist').append(('<tr><td>' +localStorage.key(i) +'</td><td>' +(localStorage.getItem(localStorage.key(i))) +'</td></tr>')); }; //add in the number of items $('#keylist').append('<tr><td>Number of items</td><td>' + items + '</td></tr>');
<form id ="elformo" name="elformo" > <label for="date">date</label> <input type="date" placeholder="Date" name="Date"/> <label for="url">URL</label> <input type="URL" placeholder="URL" name="URL"/> <label for="email">Email</label> <input type="email" placeholder="email address" name="email"> <label for="range">Range</label> <input type="range" min="1" max="10" name="range" /> <label for="area">area</label> <textarea type="text" name="area" placeholder="Text area"></textarea> <button type="button" onclick="button()">send or something</button> </form> <output name="form output" for="date URL email range area text" form="elformo"> </output> <button type="button" onclick="localStorage.clear()">Clear</button> <output id="info"> <h2>stats</h2> <p id="email"></p> <table id="keylist"> </table> </output>
form, output{ background: #fffefe; border-radius: 5px; border: 2px solid #333; width: 200px; display:block; float:left; margin-right: .5em; min-height: 180px; } label{ float:left; margin:0; font-size: 10px; height:12px; padding: 0; width: 100%; } form > input{ margin: 1em; padding: .5em; } input{ float:left; } input[type="email"], input[type="date"],input[type="url"]{ height: 1.5em; outline: none; border: 1px solid #efefef; background: #efefef; color: #777; } input[type="email"]:hover, input[type="email"]:focus, input[type="date"]:hover,input[type="url"]:hover, input[type="date"]:focus,input[type="url"]:focus{ border-color: #777; }