JavaScript with Sean Doyle

Lesson 9: Server Interactions with JavaScript

Storing User Data with Cookies and the Storage API

The Big 5 Concepts

  1. HTTP is a “stateless” protocol, meaning that it does not remember a visitor from one page to the next - or even to the same page - without a storage mechanism. The user experience can be greatly enhanced by storing relevant user data, such as favourite colour, postal code, or speaking language. THESE MECHANISMS SHOULD NOT BE USED TO STORE SENSITIVE DATA AS THEY CAN BE HIJACKED.
  2. A Cookie is a small text file created by the web server and stored on the client computer. Only the domain that created the cookie can access their own cookie.
  3. cookie is a property of the document object and can be used to create and access cookies as key=value pairings stored as a continuous string of characters.
  4. In contrast to the cookie property, the Storage API provides a mechanism that allows us to store values in an object-oriented fashion using key,value pairings.
  5. This API is part of the window object and has two versions: one that expires with the browser session (sessionStorage), and one that persists beyond the current session (localStorage) acting like a cookie.

Code Samples

//Creating a cookie. Note the key=value pairing. This is similar to saying: var postalcode = "M9W5L7";.
document.cookie = "postalcode=M9W5L7";

//The cookie will be deleted when the browser session ends unless we specify its lifespan (in seconds) with max-age.
document.cookie = "country=CA;max-age=86400;"; //The # of seconds in 24 hours.


//Storing and retrieving values with the Storage API. Once again, we see "getters" and "setters" working with key:value pairs...
localStorage.setItem("language", "enca"); //The same as: var language = "enca"; but stored on the client computer through the storage mechanism.

//Retrieving a stored value...
var userLanguage = localStorage.getItem("language"); //userLanguage is holding "enca".

For More Information

A Deeper Dive

Asynchronous Updates with AJAX

The Big 5 Concepts

  1. “Asynchronous” After a page has loaded, AJAX means going to a web server to retrieve data, then updating a part of the page without refreshing the whole page. Because this happens at a different time than the loading of the main page, we refer to this action as being “asychronous”.
  2. AJAX stands for Asynchronous JavaScript And XML, but more commonly refers to the behaviour of updating part of a webpage, regardless of the file type it is retrieving.
  3. The key player in this functionality is a special object, the XMLHttpRequest object.
  4. Through this object, we make a connection from the client to the server, request the file, and return it back to the client.
  5. Our code provides the logic that will wait for the file to return, process the received data, then update the DOM with the desired content.

Code Samples

var xhr = new XMLHttpRequest(); //Create a new request object.

xhr.onreadystatechange = function() {
  //In here we wait for the file to return from the server, then handle it.
};

xhr.open("GET", "myfile.text", true); //Opening a connection to the server and requesting the file.

xhr.send(null); //Sending the request.

For More Information

A Deeper Dive