Webolution Designs Musings

Various posts on technology (code/programming). Our hope is that these posts improve your world.

Recent blog posts

Posted by on in JavaScript
HTML5 Local Storage

In a previous post, I wrote of the advantages of HTML5 storage. In today's post, I want to give an example of HTML5 local storage.

First let's create the HTML...

<!-- HTML to demonstrate HTML5 Local Storage -->
<p>
    <!-- Button to click that will invoke our counter function. -->
    <button onclick="clickCounter()" type="button">Click me!</button>
</p>
<!-- Div that will hold the result of clicking the counter button. -->
<div id="result"></div>
<!-- Instructions. -->
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

 So to set the stage, we have an HTML button that once clicked, will invoke a function called clickCounter(). Let's take a look at what clickCounter() does...

...
Hits: 30
Rate this blog entry:
0

Posted by on in JavaScript
Storage Wars?

In a previous post, I mentioned HTML5 storage. I then went on to talk about cookies. I mentioned that I have gone away from using cookies to using HTML5 storage. It is not that cookies are bad, but HTML5 storage is so much easier and has advantages that I like better than cookies. So what are some of those advantages?

  • More secure
  • Faster
  • Not included in every server request (makes app faster)
  • Store larger amounts of data
  • Data is stored in key/value pairs...easier for programming

There are two types of HTML5 storage...

  • Local - lasts beyond the current browser session
  • Session - goes away once the current browser session is over

Note: While all modern browsers use HTML5 storage, it is probably a good idea (depending on what environments you are supporting) to test for HTML5 storage capability. So how do we do that?

...
Hits: 44
Rate this blog entry:
0

Posted by on in JavaScript
Stay Outside!

In today's post, I want to discuss separation...of code that is. In web applications, you typically deal with what I call the 'three-legged stool' of HTML (content), CSS (layout/style) and JavaScript (functionality). In the 'old days', these were comingled. This made it very difficult to update. Allow me to give a simple example...

In one of my previous roles, I managed a web site for a computer company in Northern California. This site contained over 72,000 pages. Now, I know what you are thinking, "Why in the world were there that many pages?!?" That would be for another post, but hange with me on my example. We went through several mergers and acquisitions while I was there. Sometimes this entailed marketing and branding changes on the web site. So, imagine if we changed our h1 font color from blue to red. Now imagine we had that style change embedded in each of the 72,000 pages. This simple change would become very complex and very expensive. Yes, there are search and replace techniques, but still not ideal. The ideal technique is to separate.

In JavaScript, this means to not have code embedded within your HTML. Now if you are learning something with JavaScript, sometimes it is more convenient to deal with it within one page, but never put production code within an HTML page. So, simply put your JavaScript code within its own file. This makes maintenance much easier. Now how do we get the code into out HTML file? The answer is the script tag...

...
Hits: 43
Rate this blog entry:
0

Posted by on in JavaScript
Eat the Cookie

In my last couple of posts ('C is for Cookie' and 'Read Your Fortune...Cookie That Is'), I spoke about cookies, how they are created and read, but what if you wish to get rid of a cookie? End users can clear out their cookies anytime they wish, but as developers, there might be times when we would like to clear a cookie. How can we accomplish this programmatically?

It is fairly simple...we just have to write a cookie with the name we would like to erase, have the value be blank and a date of -1. This will cause it to be erased. Here is some example code...

 

...
Hits: 53
Rate this blog entry:
0

Posted by on in JavaScript
Read Your Fortune...Cookie That Is

In my last post, I shared how to write a cookie using JavaScript, but how do we read the cookie to get the information back out and use it?

Basically, JavaScript provides a way we can grab cookies and read through them and pull the information out of them. Let's look at a function that does just that...

// Function to read a cookie by the name of the cookie
function readCookie(name) {
  // Find the specified cookie and return its value
  var searchName = name + "=";
  // Use the document cookie property to grab the cookie.
  // Cookies are separated by a semi-colon, so use split() method 
  // to turn cookie into array
  var cookies = document.cookie.split(';');
  // Loop over cookie array
  for(var i=0; i < cookies.length; i++) {
    // Store each looped over cookie value
    var c = cookies[i];
    // Loop over the specific cookie entry to see if it is populated
    while (c.charAt(0) == ' ')
      // Grab the cookie and use indexOf() to search for the cookie name we passed
      c = c.substring(1, c.length);
    if (c.indexOf(searchName) == 0)
      // If we find our cookie, return it
      return c.substring(searchName.length, c.length);
  }
  // If not found, return null
  return null;
}

 We can call this function, pass a name of a cookie to it and it will pull the cookie we want out of the cookie text file.

...
Hits: 77
Rate this blog entry:
0

Get in touch

Go to top