Building a stickies option for using in a browser (Become an expert)

We begin the first of our demos. This looks at building a basic stickies option, as a practical introduction to using Local Storage.

Getting ready

For this recipe, you will need your normal text editor, as well as the code that accompanies this book.

How to do it...

Perform the following steps, to build a stickies option for using in a browser:

  1. Let's begin with creating a new HTML document. Save the following code as stickies.html:
    <!DOCTYPE html>
<head>
  <title>Storing content using Stickies and 
  LocalStorage</title>
  <meta charset="utf-8" />
  <link href=
  "http://fonts.googleapis.com/css?family=
  Reenie+Beanie:regular" rel="stylesheet" type="text/css"> 
  <link rel="stylesheet" type=
  "text/css" href="css/stickies.css">
  <script type="text/javascript" src=
  "http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" 
  src="js/stickies.js"></script>
</head>
<body>
  <div id="postit-pad">
    <pre id="postit" contenteditable="true" 
    onkeyup="storeSticky(this.id);"></pre>
    <a class="clearStorage" href='' onclick=
    'javascript:clearLocal();'>Clear local storage</a>
  </div>
  <script>
    getSticky();
  </script>
</body>
</html>
  2. We need to add the functionality that's going to save content to, or retrieve from, LocalStorage. Go ahead and add the following into a new document called stickies.js, in the subfolder js:
    function storeSticky(id) {
  var scribble = $("#postit").text();
  localStorage.setItem('userScribble',scribble);
}
function getSticky() {
  if ( localStorage.getItem('userScribble')) {
    var scribble = localStorage.getItem('userScribble'),
  }
  else {
    var scribble = 'You can scribble directly on this 
    sticky...and I will also remember your message the next 
    time you visit!';
  }
  document.getElementById('postit').innerHTML = scribble;
}
function clearStorage() {
  clear: localStorage.clear(); 
  return false;
}
  3. We finally need to add some styling. In the code that accompanies the book, you will find two additional folders for this project that we need. Copy img and css into the same location as your HTML and JavaScript files.
  4. If all is well, you should see something similar to the screenshot, when previewing this in your browser:
    How to do it...

How it works...

This is a nice simple example of how you can use Local Storage to create a useful application, even if ours would need more work before it becomes a polished saleable application! In this instance, we've used a mix of plain JavaScript and jQuery—not out of necessity, but as a means to illustrate that you can achieve the same result using either method.

We've created a simple framework within a <div> element called postit-pad, which is styled using CSS2 and CSS3 rules. Within the stickies.js file, we've created three simple functions—one to save content to LocalStorage, one to retrieve it, and one to remove it from LocalStorage (if desired). All three still use the methods that we've covered in this book. The difference here is that we are using native methods, rather than a polyfill or external library.

Note

There is scope to improve this code. For example, it is missing vital checks to ensure compatibility. If you would like to look at what is possible, you may want to take a look at the following two posts:

Let's move on and take a look at another demo, which is more of a proof of concept, and will show you how you can use Local Storage to create a basic to-do list, as you will see in the next recipe.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset