Using web storage instead of cookies (Must know)

In this recipe, we're going to take a look at how you can approximate the effect of Session Storage, if you are forced use really old browsers. We'll first look at a simplified example of how you can use Local Storage and compare that to the closest available effect, if you had to use just cookies.

Note

Please note this recipe is intended to only serve as an example. It is not one that I would recommend using unless you need to maintain support for very old browsers, which is very unlikely. Most recent browsers will support the first part of this demo without too much of an issue.

How to do it...

To use web storage instead of cookies, perform the following steps:

  1. Crack open a new HTML document and add the following code snippet. Then, save it as cookieswap.html:
    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=utf-8">
    <title>Untitled 1</title>
    <script type="text/javascript">
    </script>
  </head>
  <body>
  </body>
</html>
  2. We need to add a script that calls localStorage, so add the following code snippet between the <script> tags in the header of our document:
    <script type="text/javascript">
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
  // easy object property API
  localStorage.wishlist = 
  '["Jaguar","Bugatti","Aston Martin"]';
} else {
  3. The second part of this script caters for a fall back in the event that sessionStorage isn't available at all. We can achieve a similar effect using the document.cookie's API:
      // without sessionStorage we'll have to use 
  a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Jaguar","Bugatti",
  "Aston Martin"];' + ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}</script>

How it works...

In this recipe, it is easy to see why Local Storage becomes very useful. Without it, we are limited to creating a very crude effect of Session Storage! Here, we've used the document.cookie's API to set up a cookie that is set to a date at some distance in the future, to prevent deletion of the cookie. We then create a variable that concatenates together the information we want to store and the date that needs to be set. This is assigned to document.cookie, thereby creating our cookie. If we use this code, when the date has been set sufficiently far ahead, the cookie will not be deleted.

There's more...

The danger in using this method is that users can easily delete cookies through their browsers. One could argue that it is easy enough to do the same to the elements stored in Local Storage, although the latter requires a few more steps than simply deleting cookies through a browser's GUI. However, it does not alleviate the fact that cookies are restricted to specific domains and browser instances (that is, specific tabs in the browsers). Local Storage breaks these constraints by making content available to all tab instances in a browser, as well as allowing use of more types of content, provided they can be converted to string format as we will see later in this book.

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

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