SessionStorage

SessionStorage is an alternative to session cookies, but more powerful. The HTML5 storage API defines persistent data storage of key-value pair data in Web clients. The HTML5 Storage API improves upon HTTP session and local cookies that you are likely to be already familiar with. While cookies are limited to 4KB, the new standard allows for more space. The size depends on the browser, but is generally in the MB rather that KB range. HTML5 provides for two types of storage: persistant localStorage, and unique per open window/tab sessionStorage. Today we’ll focus on sessionStorage.

SessionStorage

Session storage is accessible to any page from the same site opened in that window. If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.

Cookies are sent to the server with every HTTP request. Session data, however, isn’t sent automatically, reducing the size of every request. The developer determines which key-value pairs need to be sent with each request.

Most shopping carts us use cookie-based authentication to remember the users browser session. Without sessionStorage, if two users want to shop on the same site from two windows of the same browser, it is not possible because cookies are tied to the browser session. With session storage, this can be done as the session storage is tied to the current window. As each window maintains its own session information, using sessionStorage is perceived as if each window is a different user accessing the shopping cart from different systems.

Okay that example explains how session storage is different from cookies… but is there not a slightly more practical example to talk about? I’m just thinking what storefront is ever going to think of what you just described as a desirable scenario that they’ll want to support (or care about)?

Perhaps something like the ability to test websites by logging in as different users as the same time from different tabs, or? just something that is a bit more practical would help I think…

sessionStorage should be used to store temporary data related to a single browser window as it ceases to exist after the window is closed.

The sessionStorage object has five methods and one property:

  • setItem(key, value) – sets the value for the given key. For example, define the session variable with:
    sessionStorage.setItem('keyname', 'data value')
  • getItem(key) – retrieves the value for the given key. Returns null if the key does not exist.
    sessionStorage.getItem('keyname')
    sessionStorage.keyname
  • removeItem(key) – removes the key and its associated value. Unset the value with:
    sessionStorage.removeItem(‘keyname’);
  • key(position) – returns the key for the value in the given numeric position.
  • clear() – removes all key-value pairs. Clear all the key value pairs with:
    sessionStorage.clear();
  • length – The length property indicates how many key-value pairs are currently stored in sessionStorage.

Using sessionStorage is extremely easy. It is like defining and using a regular variable, except that it needs to be prefixed with sessionStorage.

For more information on sessionStorage, see http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/

ApplicationCache

Up until now, users of web applications have only been able to use the applications while connected to the Internet. When offline, web based e-mail, calendars and other online tools have been unavailable, and, for the most part, continue to be. While offline, users may still access some portions of sites they have visited by accessing what is in the local cache, but that is limited and inconvenient. If a user gets bumped offline in the middle of a process — writing an email, filling a form — hitting submit can lead to a loss of all the data entered. The HTML 5 specification provides a few solutions including a SQL-based database API for storing data locally, and an offline application HTTP cache for ensuring applications are available even when the user is offline. HTML 5 contains several features that address the challenge of building Web applications that don’t lose all functionality while offline, including SQL, offline application caching APIs as well as online/offline events, status, and the localStorage API.

In this section we are focusing on the Application Cache.

A book could be written about each of these topics. In this series of articles, we’re are introduced to each of the HTML5 API and related modules (for example, GeoLocation is not in the HTML5 specifications, but is often thought to be). This series will provide a brief introduction to each topic, linking to the specifications and other relevant articles. It’s important to know about what is going to be in HTML5 so that when these features are needed, and when they are available and supported on your target devices, you’ll know about these features.

Application Cache

To access a webpage offline, we’ve been able to click on the ‘save’ menu item in our browser to save the html file and associated media for a while now, but this method of saving web pages only works for static content. With the ubiquity of web-based applications, it is more important now than ever that web applications be accessible when the user is offline: whether the user is offline for the duration of a 5 hour flight, or if the user is just temporarily offline as 3G connectivity is lost while driving… um, I mean, riding as a passenger. While browsers have been able to cache components of a website, HTML5 addresses some of the difficulties of being offline with the ApplicationCache API.

Using the cache interface gives your web application the advantages of 1) offline browsing, 2) faster reloads and 3) reduced server load. With Application Cache offline browsing, you entire site (within limits) can be navigable even when a user is offline. By caching resources, the resources are local, loading much faster, and they’re retrieved only when altered, which reduces the server load. AppCache enables the local storing of up to 5MB (or limits you to 5MB, depending on your perspective) per website.

The Application Cache (or AppCache) enables you to specify which files should be cached and made available offline, enabling your website to work correctly, including page reload, when your user is not online.

For AppCache to work, you include the manifest attribute in the opening <html> tag. The value of which is the URL of a text file listing which resources should be cached. In your HTML file, include manifest="URL_of_manifest".

<!doctype HTML>
<html manifest="resourcelist.manifest">
<meta charset="utf-8" />
<title>....

With the inclusion of the manifest attribute linking to a valid manifest file, when a user downloads this page, the browser will cache the files listed in the manifest file, the manifest file itself and the current document and make them available even when the user is offline.

When the page is visited, the browser will try to update the cache if the manifest file has changed. It fetches the manifest and, if the manifest has changed since the page was last visited, the browser re-downloads all the assets and re-caches them.

The cache manifest file

The .manifest file is a text file that lists the resources the browser should cache. The file must start with the following string: CACHE MANIFEST. The required string is then followed by a list of files to be cached, and optional comments and section headers.

To create a comment, include a # as the first character of the line and the remainder of the line will be ignored. Section headers change the current section. There are three possible section headers, CACHE:, FALLBACK: and NETWORK:. The files following the CACHE: header are explicit. If no header is defined, or if files are listed above the headers, those files are explicit. FALLBACK: switches to the fallback section — if the first file is not available, the second file listed on the line will be served. While secure (https://) files may be cached, they have to be from the same origin as the manifest. The NETWORK: heading leads the online white list section – it isn’t cached, and references to this file will bypass the cache and access the file online.

The manifest file is also permanently stored into the browser cache, only to be overwritten if there is an edit made to the file. While the browser will not read the comment, the .manifest file needs to be served with the mime-type "text/cache-manifest". You may need to add a custom file type to your web server or .htaccess configuration if you don’t have access to the server.

A .manifest file lists the files that the browser should cache. The file may look something like this:

CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi

The Application Cache API adds an element to HTML5. The <event-source> element is a new feature in HTML 5 that allows servers to continuously stream updates. When used with the appCache, its src attribute takes as its value a NETWORK: file. The NETWORK: files will never be cached, so that any attempt to access that file will bypass the cache. The <event-source> tag defines a source for events sent by a server. The src attribute of the <event-source> element takes as it’s value the white-listed NETWORK: file to allow for continuous upsteaming from the server.

You’ll note that there is a version number in a comment on the second line. While the browser will generally ignore the comment, it will note if there are changes to the file. Changing the commented version number has become the standard way of informing the browser that the manifest file should be considered updated.

Updating the cache

Once an application is offline it remains cached until the user clears their browser’s data storage for your site, the .manifest file is modified or the app cache is programmatically updated.

If you update a file listed in the manifest, this does not inform the browser that the assets must be re-cached. The reason we added the commented version number was to inform the browser that the assets must be re-cached by altering the .manifest file itself.

If the manifest file or a resource specified in it fails to download, the entire cache update process fails and the browser will keep using the old application cache.

JavaScript Variable Scope

There are two variable scopes in JavaScript: local and global. Local variables exist only inside the function in which they were declared. Local scope means a variable can only be referenced from within that function in which it was declared. Global variables, on the other hand, once declared, exist throughout the script and their values can be accessed (and changed) from within any function or outside of a function. In other words, global scope means a variable can be referenced from anywhere within your site’s javascript.

There is a third type of scope called "static" or "closure". "Closures" are variables that are local to a function, but keep their values between function calls. Closures are an advanced javascript topic and will not be discussed in this article.

Let’s show 5 variables being declared, and discuss their scope

1.  <script type="text/javascript">
2.   
3.  var outsideFunction1 = "hello"; 
4.  outsideFunction2 = 42; 
5.   
6.  function myFunction(myParameter){
7.      var insideFunction1 = new Array();
8.      insideFunction2 = false;
9.  }
10.   
11. </script>

Listing 1: Example of local and global variable declaration

The first variable is on line 3: outsideFunction1. Even though this variable is declared with the var keyword, it is declared outside of any function, and therefore has global scope.

The second variable is on line 4: outsideFunction2. This variable is also declared outside of any function, and therefore has global scope.

The third variable is on line 6: myParameter. Function parameters always have local scope. Even if there were a global variable called myParameter, that global variable will maintain its value even if the value of myParameter was changed within the function.

The fourth variable is on line 7: insideFunction1. Because this variable is declared within a function with the var keyword, it also only has local scope. Similar to parameter variables, even if there were a global variable called insideFunction1, that global variable would maintain its value even if the value of insideFunction1 were changed within the function.

The fifth variable is on line 8: insideFunction2. This is really the reason that this article is needed: this is a global variable declared within a function, which is one of the most common causes of logic errors. Because the var keyword has been omitted, the insideFunction2 variable is global.

Local Variables

Variables initialized inside a function using the var keyword will have a local scope. If you initialize a variable inside a function without the var keyword, your variable will have a global scope. Parameters are local variables, as if the keyword var was included before the parameter. Local variables, including a parameters, can have the same name as a global variable.

var myName = "estelle";  // global
alertThisName("jonathan");
 
function alertThisName(myName){ // local
		alert(myName); // alerts "jonathan"
}
 
alert(myName); // alerts "estelle";

Listing 2: The variable myName is declared both globally outside of the function, and locally as the function parameter. Variables declared as function parameters have local scope. The myName variable on the first line is a global variable. The variable myName declared as a parameter of the function is a local variable only visible within the alertThisName function.

In this case, declaring a local variable with the same name as a global variable masks the global variable: all global variables in your script are accessible to this function EXCEPT the global myName variable.*

Note: In browsers, global variables that are masked by a function’s local variable with the same variable name are still accessible to the function by accessing the global variable thru it’s parent. In Listing 2, if you are in a browser, you could access the global myName variable from within the alertThisName function by using window.myName or top.myName.

var myCount = 7;  // global
doSomeMath();
 
function doSomeMath(){ // 
		var myCount = 7 * 7;
		alert(myCount); // alerts "49"
}
 
alert(myCount); // alerts "7";

Listing 3: In this example, the global and local variables both have the same name. Since the variable within the function was declared using the var keyword, the variable has local scope. Manipulating the value of the local value has no impact on the value of the global variable declared in the first line.
Once we exit the function, the local variable myCount no longer exists and recognition of the global variable’s existence is reinstated.

Similar to listing 2, in this case the local declaration of the myCount variable makes the global myCount variable inaccessible to this function. The function can access all global variables EXCEPT for the global myCount variable, unless you access the variable as noted in the tip above.

var myCount = 7;  // global
doSomeMath();
 
function doSomeMath(){ 
		myCount = 7 * 7;
		alert(myCount); // alerts "49"
}
 
alert(myCount); // alerts "49";

Listing 4: Since the variable within the function was declared WITHOUT using the var keyword, the variable has GLOBAL scope. The global variable declared in the first line and the variable used in the function both have the same name and are, indeed, the same global variable. In this example, manipulating the value of the global value within the function changed the value of the variable throughout the program.

function doSomeMath(){  
		myCount = 7 * 7;
		alert(myCount); // alerts "49"
}
 
alert(myCount); // throws an error: myCount is undefined

Listing 5: While the variable in the doSomeMath function would be a global variable, as the variable is declared in the function WITHOUT using the var keyword. Since the function is never called, the variable is never declared. Accessing the variable that doesn’t exist in the last line throws an error.

Rules to remember:

  1. Local variables inside a function can only be referenced from within the function in which the local variable was declared.
  2. All global variables can be referenced from within any function.
  3. All global variables can be referenced from outside any function.
  4. No local variables, declared with use of the var keyword, can be referenced from outside the function in which they were declared