I have been learning javascript for the past couple weeks and up until now I have been utilizing procedural programming to create my documents. I'm currently learning object-oriented programming, and while I know some java, it's been a while and I'm having trouble with these finicky objects. I want to take user input for a face value and suit of a card and use that data to instantiate an object from a constructor function. I know there are easier ways to do this but that would defeat the purpose of the lesson I'm trying to learn. Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Card Constructor</title>
<h1 style="text-align:center">Create a playing card!</h1>
<script>
function Card(){
this.face=" ";
this.suit=" ";
this.info="You made a "+face+" of "+suit"!";
this.showInfo=function(){
alert(this.info);
}
this.setFace=function(newFace){
this.face=newFace;
}
this.setSuit=function(newSuit){
this.suit=newSuit;
}
}
function userCard(){
var goodCard=new Card();
goodCard.setFace=document.getElementById('faceInput').value=this.face;
goodCard.setSuit= document.getElementById('suitInput').value=this.suit;
goodCard.showInfo();
document.getElementById('faceInput').value=" ";
document.getElementById('suitInput').value=" ";
}
</script>
</head>
<body style="text-align: center">
<p>Please enter a face</p>
<input type="text" id="faceInput" name="face" value=" "/>
<p>And now a suit</p>
<input type="text" id="suitInput" name="suit" value=" "/></br>
</br><input type="button" value="Go!" onClick="userCard()"/>
</body>
Now, the problem is that my button doesn't work. If change my onClcik to onClick=alert('you clicked') I get a response. So I know I must have screwed something up in my script. Can anyone help a noob out?
For anyone curious on how I ended up getting this to work, or if you have an assignment in your textbook that calls for creating objects with set methods and you're stuck, this is how I ended up doing mine. Note: I have two set methods that modify my one info method.
<html>
<head>
<title>Card Constructor</title>
<h1 style="text-align:center">Create a playing card!</h1>
<script>
function Card(face, suit){
this.face="";
this.suit="";
this.info=face+" "+suit;
this.setFace=function(newFace){
this.face=newFace;
}
this.setSuit=function(newSuit){
this.suit=newSuit;
}
this.showInfo=function(){
this.info="You made a "+this.face+" of "+this.suit+"!";
alert(this.info);
}
}
function userCard(){
var goodCard=new Card();
goodCard.setFace(document.getElementById('faceInput').value);
goodCard.setSuit(document.getElementById('suitInput').value);
goodCard.showInfo();
document.getElementById('faceInput').value="";
document.getElementById('suitInput').value="";
}
</script>
</head>
<body style="text-align: center">
<p>Please enter a face</p>
<input type="text" id="faceInput" name="face" value=""/>
<p>And now a suit</p>
<input type="text" id="suitInput" name="suit" value=""/></br>
</br><input type="button" value="Go!" onClick="userCard()"/>
</body>
</html>
replace your javascript code:
UPDATED:
1.There is your code has optimized.
Your this.face and this.suit is public variable, so there are this.setFace and `this.setSuit' unnecessary methods.
You just write goodCard.face = ... and goodCard.suit = ... instead of addressing to method
function Card(faceVal, suitVal) {
this.face = faceVal;
this.suit = suitVal;
this.info = "";
this.showInfo = function () {
this.info = "You made a " + this.face + " of " + this.suit + "!";
alert(this.info);
}
}
function userCard() {
var goodCard = new Card(document.getElementById('faceInput').value, document.getElementById('suitInput').value);
goodCard.showInfo();
document.getElementById('faceInput').value = "";
document.getElementById('suitInput').value = "";
}
2.Also, I suggest other way to declare Card function.
There are private variables, getter/setter(also, you can use only setters or getters) as well as other public methods(like java class).
function Card(faceVal, suitVal) {
//private variables
var _face = faceVal || "",
_suit = suitVal || "",
_info = "";
Object.defineProperties(this, {
//region <Getter & Setter>
face: {
get: function () {
return _face;
},
set: function (val) {
_face = val;
},
enumerable: true
},
suit: {
get: function () {
return _suit;
},
set: function (val) {
_suit = val;
},
enumerable: true
},
info: {
get: function () {
return _info;
},
set: function (val) {
_info = val;
},
enumerable: true
}
});
//other public methods
this.showInfo = function () {
_info = "You made a " + _face + " of " + _suit + "!";
alert(_info);//or alert(this.info)
}
}
var goodCard = new Card();//you can define object outside without params
function userCard() {
goodCard.face = document.getElementById('faceInput').value;
goodCard.suit = document.getElementById('suitInput').value;
goodCard.showInfo();
document.getElementById('faceInput').value = "";
document.getElementById('suitInput').value = "";
}
Related
I'm very new to JavaScript so I apologize if this question has an extremely obvious answer. What I'm trying to do is pass the name of a text box in HTML to a function in Javascript via an onclick button. The goal of the function is to test a given string and highlight it based on certain parameters (for my testing, it is simply length).
There are multiple weird odds and ends within the functions that I'm aware of and working on, I know the functions work as when I remove the parameters and call the code text box directly, it prints exactly what I expect it to. But I want to be able to pass multiple text boxes without needing a specific function per box.
The code I have is as follows. I've included all of it in case the mistake was made somewhere I didn't expect it to be.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<label for="wordOne">Word One</label><br>
<input type="text" id="wordOne" name="wordOne"><br>
// Pass the value for the wordOne textbox to verify function
<button type="button" onclick="verify(wordOne,this)">Check</button><br><br>
<label for="wordTwo">Word Two</label><br>
<input type="text" id="wordTwo" name="wordTwo"><br>
// Pass the value for the wordTwo textbox to verify function
<button type="button" onclick="verify(wordTwo,this)">Check</button><br><br>
<p id="test"></p><br>
<p id="error"></p>
<script>
// Highlights any code in a given line.
function highlight(text,id,begin,end) {
// document.getElementById("error").innerHTML = "TEST";
var inputText = document.getElementById(id);
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text)+begin;
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
inputText.innerHTML = innerHTML;
return string;
}
}
function verify(button,el){
var begin=1;
var end=1
var id="test";
var string = document.getElementById(button).value;
var len=string.length;
if(len>5)
{
document.getElementById(id).innerHTML = string +" "+len;
highlight(string,id,begin,end);
}
else
{
document.getElementById(id).innerHTML = string;
}
}
</script>
</body>
</html>
I apologize again if this is extremely obvious but I'm honestly not sure what I'm doing wrong. Thanks in advance for any help!
You can get the name of the textbox by the attribute
var x = document.getElementsByTagName("INPUT")[0].getAttribute("name");
And then use it in your function as
var x = document.getElementsByTagName("INPUT")[0].getAttribute("name");
function highlight(x,id,begin,end) {
// document.getElementById("error").innerHTML = "TEST";
var inputText = document.getElementById(id);
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text)+begin;
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
inputText.innerHTML = innerHTML;
return string;
}
}
NOTE : By [0] it means the first one that is the first textbox.
I am instantiating a new variable from a class. The class has one constructor, city and then fetches jazz clubs through the foursquare API.
When I hard-code the city name into the instantiated class, it works fine. But when I want to feed it a dynamic value (a query from the search bar which I grab through the DOM), it won't recognise the city. Here is the code:
The Class:
class Venues {
constructor(city) {
this.id = '...';
this.secret = '...';
this.city = city;
}
async getVenues() {
const response = await fetch(`https://api.foursquare.com/v2/venues/search?near=${this.city}&categoryId=4bf58dd8d48988d1e7931735&client_id=${this.id}&client_secret=${this.secret}&v=20190309`);
const venues = await response.json();
return venues;
}
}
const input = document.getElementById('search-input').value;
const button = document.getElementById('button');
const jazzClubs = new Venues(input);
button.addEventListener('click', (e) => {
e.preventDefault();
getJazzVenues();
})
function getJazzVenues() {
jazzClubs.getVenues()
.then(venues => {
console.log(venues);
})
.catch(err => {
console.log(err);
});
}
Anyone knows why the the input variable's value is not recognised by the newly instantiated jazzClubs variable?
Also, if you have tips on how to structure this code better or neater, I'd welcome any suggestions (the class definition is in a separate file already).
Many thanks guys!
Adam
You need to make sure, the following statements are triggered after the button click.
const input = document.getElementById('search-input').value;
const jazzClubs = new Venues(input);
Also your code looks too complex. Use simpler code using jquery.
Try something like this:
$(document).ready(function() {
$("#search-button").click(function() {
var searchval = $("#search-input").val();
var id = "xxx";
var secret = "yyy";
alert(searchval);
var url = "https://api.foursquare.com/v2/venues/search?near=" + searchval + "&categoryId=4bf58dd8d48988d1e7931735&client_id=" + id + "&client_secret=" + secret + "&v=20190309";
alert(url);
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
var venues = data.response.venues;
alert(venues);
$.each(venues, function(i, venue) {
$('#venue-result').append(venue.name + '<br />');
});
}
});
});
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>City:</label>
<input type="text" id="search-input" />
<button type="button" id="search-button">Search</button>
<div id="venue-result"></div>
</body>
</html>
I have written a basic testing framework and am challenging myself to make a single page app in vanilla Javascript.
I've been struggling to work out why my test for view is not recognizing the 'list' constructor when I run it.
My specrunner has all the files loaded into it, and my previous tests on my model works fine. Also, imitating the test using the browser console in Specrunner gives the correct output as well.
Feel free to clone my repo if that is quicker here.
Note that my testing framework "espresso" uses expect in the place of assert and also has an extra parameter for the description of test.
espresso.js
var describe = function(description, test) {
document.getElementById("output").innerHTML +=
"<br><b>" + description + "</b></br>";
try {
test();
} catch (err) {
document.getElementById("output").innerHTML +=
"<br><li>error: " + err.message + "</li></br>";
console.log(err);
}
};
var expect = {
isEqual: function(description, first, second) {
if (first === second) {
document.getElementById("output").innerHTML +=
description +
"<br><li><font color='green'>PASS: [" +
first +
"] is equal to [" +
second +
"]</li></br>";
} else {
document.getElementById("output").innerHTML +=
"<br><li><font color='red'>FAIL: [" +
first +
"] is not equal to [" +
second +
"]</li></br>";
}
}
}
Specrunner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Expresso Spec Runner</title>
</head>
<body>
<h1><u>Expresso Spec Runner</u></h1>
<br>
<div id="output"></div>
<script src="expresso/expresso.js"></script>
<!-- include source files here... -->
<script src="lib/list-model.js"></script>
<script src="lib/note-model.js"></script>
<script src="lib/list-view.js"></script>
<!-- include spec files here... -->
<script src="tests/expresso-test.js"></script>
<script src="tests/model-tests.js"></script>
<script src="tests/view-tests.js"></script>
</body>
</html>
list-model.js
(function(exports) {
"use strict";
function List() {
this.notelist = [];
}
List.prototype.add = function(text) {
let note = new Note(text);
this.notelist.push(note);
};
exports.List = List;
})(this);
// note-model.js
(function(exports) {
"use strict";
function Note(text) {
this.text = text;
}
Note.prototype.show = function() {
return this.text;
};
exports.Note = Note;
})(this);
list-view.js
(function(exports) {
"use strict";
function View() {
this.test = "hello there";
View.prototype.convert = function(note) {
var output = [];
list.notelist.forEach(function(element) {
output.push("<br><ul>" + element.text + "</ul></br>");
});
console.log(output);
return output;
};
}
exports.View = View;
})(this);
model-test.js
describe("List #initialize", function() {
var list = new List();
expect.isEqual("blank array is loaded", list.notelist.length, 0);
});
describe("List #add", function() {
var list = new List();
list.add("hello");
expect.isEqual(
"can create and store a note",
list.notelist[0].show(),
"hello"
);
list.add("goodbye");
expect.isEqual(
"second note says goodbye",
list.notelist[1].show(),
"goodbye"
);
expect.isEqual("there are two notes in the list", list.notelist.length, 2);
});
view-tests.js (the failing test)
describe("View #convert", function() {
var view = new View();
expect.isEqual(
"converts the note into a HTML list",
view.convert(list.notelist),
"<br><ul>hello</ul></br>"
);
});
Thanks in advance.
You need to define list in view-test.js.
describe("View #convert", function() {
var list = new List();
// ...
});
If you need to define list outside of this test function, then you would either need to pass it in as an argument, or define it on the window object so it's globally accessible.
This is code I've written for a class assignment. The assignment reads as follows:
"Build a function that will start the program. Please call it main().
From the main() function, call a function called getValue().
The getValue() function will get a number from the user that will be used for the next step.
Also from the main() function, call a function called getSquareRoot().
The getSquareRoot() function will get the square root of the number that was received by the user in the getValue() function.
Make sure that you display the results, including the original number and the square root of the number, to the user in an easily readable statement.
Bolding is included in the original, by the way.
Here's my code and it works, except that somehow functions are being called twice, and results are being displayed twice, with the second iteration assigning userInput a value of 0. I can't seem to identify where the 'loop' is getting fired off (beginner here). Any help would be very much appreciated; I know I'n staring at it but it's totally eluding me.
<html lang="en">
<head>
<title>Project 3 Part A</title>
<meta charset="utf-8">
<script>
function main()
{
var msg1="";
var msg2="";
var userInput = "";
getValue(userInput);
getSquareRoot(userInput);
}
function getValue(userInput)
{
var userInput = document.getElementById("userNumber").value;
return getSquareRoot(userInput);
}
function getSquareRoot(userInput)
{
squareRoot = Math.sqrt(userInput);
var msg1 = "Your original number was " + userInput + ".";
var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";
document.getElementById("original").innerHTML += msg1;
document.getElementById("results").innerHTML += msg2;
}
</script>
</head>
<body>
<br>
<input type="button" id="userInputButton" onclick="javascript:main();" value="Square root input value: "/>
<input type="text" id="userNumber">
</div>
<div id="original">
</div>
<div id="results">
</div>
</body>
enter code here
You need to remember that each function should optimally have 1 purpose only. The function 'getSquaredRoot' here is in charge of both calculating the root as well as outputting the result for the user to see.
Plus as Lucky Chingi said, you're calling getSquaredRoot twice.
function main()
{
var userInput = getValue();
var squaredRoot = getSquareRoot(userInput);
var msg1 = "Your original number was " + userInput + ".";
var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";
document.getElementById("original").innerHTML += msg1;
document.getElementById("results").innerHTML += msg2;
}
function getValue()
{
return document.getElementById("userNumber").value;
}
function getSquareRoot(userInput)
{
return Math.sqrt(userInput);
}
Notice how it's logically seperated now.
My scenario: I have an application that is 9 pages long for a total of about 125 inputs of varying types and sizes (only input, textarea, radio, and selects). I'd like to use local storage to save the form values. The user can move between the pages (e.g. to review before submitting the application) so I don't want to clear the local storage until they submit the application and if they change from page to page, the form should reload its values from local storage. Once they submit the form, then I'll clear the local storage but until then, the local storage should be retained.
I found this great jquery plugin and a demo page which appears to almost do what I'm looking for - well, with two exceptions:
1) The plugin prompts the user if they want to restore their previously entered info which I'd prefer to not have (I'd rather have the data just be there). My navigational buttons at the bottom of the form are simply "Previous" and "Continue" (on the first page, it is just "Continue" and on the last page they would be "Previous" and "Submit Application").
2) The plugin will prompt the user even if there is no data to load (this would be a non-issue if I can just have it load data if there is any and skip it if there is not). For example, the very first visit to the page will prompt the user to restore previously entered data.
Here is a link to the jquery.remember-state.js used in the demo page.
=======================================================
I took the demo above and tweaked the jquery.remember-state.js to try and make it do what I need but it isn't working correctly.
Here is my (jsFiddle).
NOTE 1: the jsFiddle is meant to just show my code and is not a necessarily a working example in the jsFiddle environment. If you copy the code to your local environment, you should be able to access the console.log to see if/what gets saved to the localStorage.
NOTE 2: S.O. wants formatted code inline so I'll see what I can do to make it format correctly.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>LocalStorage and Unload State Save</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../jQueryPlugins/RememberState/form.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- use the modified jquery.remember-state.js code in the JavaScript panel instead
the script tag below is the original js file
<script src="http://shaneriley.com/jquery/remember_state/jquery.remember-state.js"></script>-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
/* jQuery form remember state plugin
Name: rememberState
Version: 1.3
Description: When called on a form element, localStorage is used to
remember the values that have been input up to the point of either
saving or unloading. (closing window, navigating away, etc.) If
localStorage isn't available, nothing is bound or stored.
The plugin looks for an element with a class of remember_state to show
a note indicating there is stored data that can be repopulated by clicking
on the anchor within the remember_state container. If the element doesn't
exist, it is created and prepended to the form.
Usage: $("form").rememberState("my_object_name");
Notes: To trigger the deletion of a form's localStorage object from
outside the plugin, trigger the reset_state event on the form element
by using $("form").trigger("reset_state");
*/
if (!window.localStorage || !window.JSON) {
if (console && console.log) {
!window.localStorage && console.log("ERROR: you browser does not support" +
" localStorage (use this polyfill https://gist.github.com/350433)");
!window.JSON&& console.log("ERROR: you browser does not support" +
" JSON (use this polyfill http://bestiejs.github.com/json3/)");
}
return $.fn.rememberState = function() { return this; };
}
var remember_state = {
name: "rememberState",
clearOnSubmit: false, //default was true;
// ****************************
/*noticeDialog: (function() {
return $("<p />", {"class": "remember_state"})
.html('Do you want to restore your previously entered info?');
})(),*/
// ****************************
ignore: null,
noticeSelector: ".remember_state",
use_ids: false,
objName: false,
clickNotice: function(e) {
var data = JSON.parse(localStorage.getItem(e.data.instance.objName)),
$f = $(this).closest("form"),
$e;
for (var i in data) {
$e = $f.find("[name=\"" + data[i].name + "\"]");
if ($e.is(":radio, :checkbox")) {
$e.filter("[value=" + data[i].value + "]").prop("checked", true);
}
else if ($e.is("select")) {
$e.find("[value=" + data[i].value + "]").prop("selected", true);
}
else {
$e.val(data[i].value);
}
$e.change();
}
e.data.instance.noticeDialog.remove();
e.preventDefault();
},
chooseStorageProp: function() {
if (this.$el.length > 1) {
if (console && console.warn) {
console.warn("WARNING: Cannot process more than one form with the same" +
" object. Attempting to use form IDs instead.");
}
this.objName = this.$el.attr("id");
}
},
errorNoID: function() {
if (console && console.log) {
console.log("ERROR: No form ID or object name. Add an ID or pass" +
" in an object name");
}
},
saveState: function(e) {
var instance = e.data.instance;
var values = instance.$el.serializeArray();
// jQuery doesn't currently support datetime-local inputs despite a
// comment by dmethvin stating the contrary:
// http://bugs.jquery.com/ticket/5667
// Manually storing input type until jQuery is patched
instance.$el.find("input[type='datetime-local']").each(function() {
var $i = $(this);
values.push({ name: $i.attr("name"), value: $i.val() });
});
values = instance.removeIgnored(values);
values.length && internals.setObject(instance.objName, values);
},
save: function() {
var instance = this;
if (!this.saveState) {
instance = this.data(remember_state.name);
}
instance.saveState({ data: { instance: instance } });
},
removeIgnored: function(values) {
if (!this.ignore) { return values; }
$.each(this.ignore, function(i, name) {
$.each(values, function(j, input) {
if (name === input.name) { delete values[j]; }
});
});
return values;
},
init: function() {
var instance = this;
// ****************************
/* if (instance.noticeDialog.length && instance.noticeDialog.jquery) {
instance.noticeDialog.find("a").bind("click." + instance.name, {
instance: instance
}, instance.clickNotice);
}*/
// ****************************
instance.chooseStorageProp();
if (!instance.objName) {
instance.errorNoID();
return;
}
if (localStorage[instance.objName]) {
// ****************************
/*if (instance.noticeDialog.length && typeof instance.noticeDialog === "object") {
instance.noticeDialog.prependTo(instance.$el);
}
else {
instance.$el.find(instance.noticeSelector).show();
}*/
// ****************************
}
if (instance.clearOnSubmit) {
instance.$el.bind("submit." + instance.name, function() {
instance.$el.trigger("reset_state");
$(window).unbind("unload." + instance.name);
});
}
instance.$el.bind("reset_state." + instance.name, function() {
localStorage.removeItem(instance.objName);
});
// ****************************
/*$(window).bind("unload." + instance.name, { instance: instance }, instance.saveState);
instance.$el.find(":reset").bind("click.remember_state", function() {
$(this).closest("form").trigger("reset_state");
});*/
}
};
var internals = {
setObject: function(key, value) { localStorage[key] = JSON.stringify(value); },
getObject: function(key) { return JSON.parse(localStorage[key]); },
createPlugin: function(plugin) {
$.fn[plugin.name] = function(opts) {
var $els = this,
method = $.isPlainObject(opts) || !opts ? "" : opts;
if (method && plugin[method]) {
plugin[method].apply($els, Array.prototype.slice.call(arguments, 1));
}
else if (!method) {
$els.each(function(i) {
var plugin_instance = $.extend(true, {
$el: $els.eq(i)
}, plugin, opts);
$els.eq(i).data(plugin.name, plugin_instance);
plugin_instance.init();
});
}
else {
$.error('Method ' + method + ' does not exist on jQuery.' + plugin.name);
}
return $els;
};
}
};
internals.createPlugin(remember_state);
})(jQuery);
});//]]>
</script>
<script>
var thisPage = 'page1'; //defines the variable to use for local storage
$(function() {
$("form")
.rememberState({objName: thisPage})
.submit(function() {localStorage.setItem(thisPage, $(this).serializeArray());
return true;
});
});
</script>
</head>
<body>
<form method="post" action="page2.cfm">
<fieldset>
<dl>
<dt><label for="first_name">First Name</label></dt>
<dd><input type="text" name="first_name" id="first_name" /></dd>
<dt><label for="last_name">Last Name</label></dt>
<dd><input type="text" name="last_name" id="last_name" /></dd>
</dl>
</fieldset>
<fieldset class="actions">
<input type="submit" value="Continue" />
</fieldset>
</form>
</body>
</html>
I thought this was going to be tougher than it was. Here is the solution I came up with:
On the form page when the submit button is pressed:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var thisPageID = 'page1'; // each page gets its own
$('form').submit(function() {
var formFields = $(this).serialize();
localStorage.setItem(thisPageID, formFields);
data = localStorage.getItem(thisPageID);
return true;
});
});
</script>
Then on the final page, I retrieve the data for each page by its page id from the local storage and populate my div tags with the data.
function getLocalData(id){
var ApplicantData;
ApplicantData = localStorage.getItem(id);
if (ApplicantData){
$.each(ApplicantData.split('&'), function (index, elem) {
var vals = elem.split('=');
var $div = $("#"+vals[0]);
var separator = '';
// console.log($div);
if ($div.html().length > 0) {
separator = ', ';
}
$div.html($div.html() + separator + decodeURIComponent(vals[1].replace(/\+/g, ' ')));
});
}
}
Some of the Articles that helped me (some SO, some external):
- Clear localStorage
- http://www.simonbingham.me.uk/index.cfm/main/post/uuid/using-html5-local-storage-and-jquery-to-persist-form-data-47
- http://www.thomashardy.me.uk/using-html5-localstorage-on-a-form
There were more but this is all I still had open in tabs.