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:
hideform.html
:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hiding a sign-up form demo</title> </head> <body> </body> </html>
<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>
<body>
tag:<section id="container"> <button id="hide-button">Hide</button> <button id="show-button">Show</button> </section>
</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>
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;}
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%; }
#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;}
.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; }
@
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; }
$(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(); });
$('#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(); } } });
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!