HTML5 Tutorial Building a StickyNotes App – Part II

In this html5 tutorial, we will go a step farther from where we left. Yesterday, I showed you how to use HTML5 Web Storage API in my first html5 tutorial post. Today, I want, as promised, to embark on the next phase of the application. I hope you will enjoy this as much as I do. Before I jump in, let me do a recap really fast:

html5 tutorial

So, here is what we covered in my first post:

  • localStorage has setItem, getItem, length and key() features that come with it among other things.
  • localStorage converts integers and floats into strings before storing and we have to convert them back to their original types before modifying them.
  • Every browser provides at least 5MB per domain.
  • localStorage can be used as an associative array meaning you can add and retrieve key/value pairs of data as you do in associative arrays.

Back to our awesome sticky notes html5 tutorial

Basic requirements of the web application:

  • A simple input area to add more sticky notes
  • An input of type button to click
  • Some css to style up this baby
  • The javascript file that performs the magic

The index.html


<!DOCTYPE html>



<meta charset=”utf-8″>

<title>HTML5 tutorial- Next Generation of Sticky Notes</title>

<script src=”main.js”></script>

<link rel=”stylesheet” href=”styles.css” />




<input type=”text” id=”sticky_content” />

<input type=”button” id=”add_sticky” value=”Add A New Sticky Note” />


<ul id=”stickies”>





Now let us take care of the main.js


//like in my previous post, I will set the value of window.onload

//equals to init and then define it separately

window.onload = init;

function init(){

for (var i=0; i < localStorage.length; i++){

var key = localStorage.key(i);

if (key.substring(0, 6) === ‘sticky’){ //will explain this

var value = localStorage.getItem(key);

addStickiesToPage(value); //we will create this one





Explanation so far:

First, the html is simple enough. Just an input for text and another one for button – both inside a form.

Now the javaScript : continuing the first post, we already have some sticky notes in the localStorage and now we are getting them and adding them to the DOM. We use the key() method and then check to make sure that they are stickies. There is something I didn’t explicitly tell you; when creating your own sticky notes using Html5 web storage api, it is good to name them in a way that it will not collide with other possible items in the localStorage.

That being said, our sticky notes will be named following this simple convention – sticky_0, sticky_1, sticky_3 etc.

The second part of the script

main.js – defining the addStickiesToPage function.



//this function will insert the sticky notes to the DOM

//inside the <ul> element we created in the index.html file

function addStickiesToPage(value){

var stickies = document.getElementById(“stickies”);

var sticky = document.createElement(“li”);

var span = document.createElement(“span”);

span.setAttribute(“class”, “sticky”);

span.innerHTML = value;





The code above will display whatever is inside localStorage . We can make even better by making use of the form in our index.html file. We will be adding to the init function by handling a click event. Let us take a look here.


//inside our init function,

function init(){

var button = document.getElementById(“add_sticky”);

button.onclick = makeSticky; //we have to define this function

//continue the init function here as shown above by adding

//the for loop to get items from localStorage



Define the makeSticky function


function makeSticky(){

var value = document.getElementById(“note_content”).value;

var key = “sticky_” + localStorage.length;

localStorage.setItem(key, value);




Let us see some sticky notes now!

html5 tutorial

Once again, I am realizing that this post is getting longer as I type. I am going to stop here and then continue the next part tomorrow. You are probably thinking; what is left? We already have stickies…but there are several issues coming up and I would like you to take a moment to think about it. Do you think our naming convention for the stickies is good enough?

What if we want to delete the sticky notes after they are not needed anymore? We will be adding all those as we improve our app. Every browser comes with tools that you can use to see behind the scenes of localStorage and even delete them from there.

Html5 tutorial summary:

Our web application is working by doing the following things:

  • Allows you to type some content and add sticky notes to the DOM
  • It checks to make sure we are retrieving the right items
  • We now create stickies on the fly by clicking a button.
  • We have used css to make the whole thing beautiful.

I will see you in the third post as we add more fun stuff.

If you have any questions, or want to add some ideas, please leave some comments below. Please also share this post with your friends online if you liked it. Thank you so much for stopping by and I hope you had fun.

See you tomorrow!




Written By Elisha Chirchir

Elisha Chirchir is a software developer. He is also the founder of Simple Developer and co-founder of Instinctive Software Solutions. On any given day, he works on both Android and Web Development. During his 'free time', he offers training to those interested in learning how to code in php, java, python, javaScript etc. You can easily find him on StackOverflow Android chatroom or on Twitter @Eenvincible

8 Comments on “HTML5 Tutorial Building a StickyNotes App – Part II

  1. Elisha Chirchir Reply

    July 24, 2013 at 4:25

    I have shared the css here:

    You can visit that link and freely use it for your own application! Enjoy

  2. ane Reply

    April 7, 2014 at 8:39

    Hello I have added key.substring(0,6) command but the console in google chrome tells me the following error:
    Uncaught TypeError: Cannot call method ‘substring’ of null


    • Elisha Chirchir Reply

      April 7, 2014 at 8:53

      It basically means there is nothing in your storage yet. You should probably add something there. Did you add some values to the storage?

      • ane Reply

        April 7, 2014 at 8:56

        yeah! I aded with createStickynote methos and they storage in my localstorage, I see them perfectly

        • Elisha Chirchir Reply

          April 7, 2014 at 8:58

          Ok. Go ahead and empty the storage and then store new key-value pairs again and then try it one more time.

          • ane

            April 7, 2014 at 9:01

            I have removed them, but I obtain the same mistake in my console:
            Uncaught TypeError: Cannot read property ‘substring’ of null

            do you want me to copy my code piece?

          • ane

            April 7, 2014 at 9:04

            for(var i=0; localStorage.length; i++) {

            var key = localStorage.key(i);

            if (key.substring(0,6)=== “postit_”){

            var texto_de_la_nota = localStorage.getItem(key);


  3. mustafa Reply

    January 18, 2015 at 7:55

    Thanx for so comprehensive article. Am using phonegap to convert webapp into native android app. So, will all the features of HTML5 Webstorage still work to store data locally?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.