If you browse on the Internet and register for access to a site, you would be more than a little irritated if the same site kept prompting you to register, wouldn't you? This is one of my pet hates. We can easily fix this with the help of Local Storage, as you will see in this recipe.
Perform the following steps, for using Local Storage to hide sign-up forms:
- Let's begin by creating our basic framework. Add the following to a new HTML document, and save it as
hideform.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hiding a sign-up form demo</title> </head> <body> </body> </html> - We need to add references to Modernizr, jQuery, and our custom script. We're going to add a Google font to style the form, for good measure:
<link href="hideform.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script type="text/javascript" src="hideform.js"></script>
- Next come the two buttons that will allow us to show or hide the registration form, as appropriate. Add the following code immediately below the opening
<body>tag:<section id="container"> <button id="hide-button">Hide</button> <button id="show-button">Show</button> </section>
- Next is the real meat of our form. Add the following immediately below the closing
</section>tag:<div id="sign-up-form"> <form> <h3>Enter your details to sign up to our newsletter:</h3> <div class="input-prepend"> <span class="add-on">@</span><input name="email" type="email" placeholder="Enter your e-mail address"> </div> <div class="input-prepend"> <span class="add-on">@</span><input name="emailconfirm" type="email" type="text" placeholder="Please re-enter it to confirm"> </div> <input type="submit" value="Submit" name="subscribe" class="btn btn-small"> </form> </div> <section> - We now have a basic form in place, but it really doesn't look particularly stylish. Let's fix that by adding some styles, beginning with the basic ones to style the document:
body { font-size: 13px; line-height: 18px; font-weight: normal; } section { display:block; } form { margin:0 0 18px; } h3 { text-rendering: optimizelegibility; margin-bottom: 7px; margin-top: 0px; font-size: 18px; font-family: 'Shadows Into Light', cursive;} - Next comes the styling for the input fields and submit button:
input, button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin-left:0; } input[type=submit] { width:auto; } input[type=email] { background-color: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset; color: #555555; display: inline-block; padding: 5px; width: 89.5%; } - We will need to provide some styles for our form too, so go ahead and add the following code:
#container { width:400px; margin: 100px auto 0; } #sign-up-form { background-color: #F5F5F5; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; margin-bottom: 20px; min-height: 20px; padding: 19px; width: 375px;} - Next comes the styling for our button:
.btn { background: #F5F5F5 url(none) repeat-x; border-radius: 4px 4px 4px 4px; color: #333333; cursor: pointer; display: inline-block; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.05); margin-bottom: 0; text-align:center; padding: 4px 10px; text-shadow: 0 1px 1px rgba(255,255,255,0.75); vertical-align: middle; border: 1px solid #B3B3B3 #E6E6E6 #E6E6E6; } - Finally we need to add styles for the
@sign that prepends each input field:.input-prepend { margin-bottom:5px; } .input-prepend .add-on { margin-right: -1px; border-radius: 0 0 0 0; margin-left: -1px; background-color: #EEEEEE; border: 1px solid #CCCCCC; display:inline-block; height: 18px; min-width: 16px; text-align: center; text-shadow: 0 1px 0 #FFFFFF; vertical-align: middle; width: auto; padding: 4px 5px; border-radius: 3px 0 0 3px; } .input-prepend input { border-radius: 0 3px 3px 0; margin-bottom: 0; position: relative; vertical-align: middle; } - Let's now add the script that will add the Local Storage functionality, and make the form work, beginning with a check for Modernizr, followed by the event handler for the Hide button:
$(document).ready(function($){ if (Modernizr.localstorage) { $('#hide-button').click(function(e){ localStorage.setItem('subscribed',true); $('#sign-up-form,#hide-button').slideToggle(); $('#hide-button').hide(); $('#show-button').show(); }); - We pair that with the event handler for the Show button and then show or hide the buttons accordingly, depending on whether we have already subscribed or not:
$('#show-button').click(function(e){ localStorage.setItem('subscribed', false); localStorage.clear(); $('#sign-up-form').slideToggle(); $('#hide-button').show(); $('#show-button').hide(); }); var is_subscribed = localStorage.getItem('subscribed'); if(is_subscribed){ $('#sign-up-form,#hide-button').slideToggle(); } if(!is_subscribed){ $('#sign-up-form').show(); $('#show-button').hide(); } } }); - If all is well, you should see the following result when previewing this in a browser.This has the subscribed value already set:
This recipe works on the principle that we control which of the two buttons are visible, depending on the value set for subscribed in LocalStorage.
By default, when you first visit the form, you will see both. It is only when you've submitted your details for the first time that it sets the subscribed in LocalStorage to true. On subsequent visits, the code checks for this first and then shows or hides the form and hide button, depending on whether or not it can retrieve a value for the subscribed attribute from Local Storage.
This is a very simplified example. It is likely that you would not want to have both buttons being shown, but set something more akin to what Amazon does on its website:
Notice the Not Alex? Sign Out option at the bottom of the menu. This is a perfect example of how you could use Local Storage. If a user has signed in, you could store their details in Local Storage, and then use a menu option such as the one in the preceding screenshot to display the login form so that the user can either log in with their own details or register as a new user.
We have now come to the end of the book. We looked at a number of recipes to show you how you can use the power of Local Storage within your pages. This is only just the start of what you can achieve using the functionality. There is a whole world out there to explore, which is only limited by the bounds of your imagination. I hope you've enjoyed working through the recipes, just as much as I have enjoyed writing this book!