Today we present the tutorial about creating a simple web application, which stores data in localStorage. The app will be able to save and store the settings of its own appearance.
Web storage tutorial
1. Let’s start by adding jQuery and simple CSS styles for UI elements:
…
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<style>
#main {
border: solid 1px #00e;
margin: 0 auto;
padding: 5px;
text-align: center;
width: 33%;
}
</style>
…
2. Create a simple form in the body section:
<body>
<section id="main">
<form onsubmit="javascript:storeSettings()">
<label>Select font size: </label><br />
<input id="your_font" type="number" max="50" min="5"
value="14">
<br />
<label>Select border size: </label><br />
<input id="your_border" type="number" max="10" min="1"
value="1">
<br />
<label>Select color for background: </label><br />
<input id="your_color" type="color" value="#ffffff">
<br />
<p>
<input type="submit" value="Save settings">
<input onclick="removeSettings()" type="reset"
value="Remove settings">
</p>
</form>
</section>
</body>
Now we can code handlers in JavaScript.
