Cookies

An http cookie AKA web cookie, AKA browser cookie is a small piece of data stored in a text file that a server sends to the user’s web browser. The browser may store it and send it back with later requests to the same server. Typically, it’s used to tell if two requests came from the same browser — keeping a user logged-in.

When a web server sends a web page to a browser, the connection is shut down, and the server forgets everything about the browser. Cookies were invented to solve the problem “how to remember information about the user”:

• When a user visits a web page, his/her name can be stored in a cookie.
• Next time the user visits the page, the cookie “remembers” his/her name.

Cookies are saved in name-value pairs like: username=folauk

When the browser requests another web page from the server, cookies belonging to that page are added to the request. This way the server gets the necessary data to “remember” information about users.

You can use javascript to read cookies this way

document.cookie – gets all the cookies

   // function to read a cookie from browser
   function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
}

LocalStorage

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, next week, or next year.

// save data to localStorage
localStorage.setItem("key", "value");
//example saving data to localStorage
localStorage.setItem("lastName", "Kaveinga");

// retrieve data to localStorage
var value = localStorage.getItem("key");
// example of retrieving data from localStorage
var lastname = localStorage.getItem("lastName");

// remove data from localStorage
localStorage.removeItem("key");
// example of removing data from localStorage
localStorage.removeItem("lastName");l

// remove all localStorage content for a perticular domain
localStorage.clear();

SessionStorage

The sessionStorage object stores data for only one session. The data is deleted when the browser tab is closed.

// save data to sessionStorage 
sessionStorage.setItem("key", "value"); 
//example saving data to sessionStorage 
sessionStorage.setItem("lastName", "Kaveinga"); 

// retrieve data from sessionStorage 
var value = sessionStorage.getItem("key"); 
// example of retrieving data from sessionStorage 
var lastname = sessionStorage.getItem("lastName"); 

// remove data from sessionStorage 
sessionStorage.removeItem("key"); 
// example of removing data from sessionStorage 
sessionStorage.removeItem("lastName");l

// remove all sessionStorage content for a perticular domain
sessionStorage.clear();