Class 11 Notes for Web Scripting

Learning Objectives:

You will be able to create a cookie and place it on a client

You will be able to read a cookie from a client's computer

You will be able to identify the difference between Local Storage and Cookies



Read: Chapter 8

Review: Javascript Cookies

Review: PHP Cookies

Review: HTML 5 Local Storage

Create: A webpage that sets a cookie and another page that reads the cookie data

Topics Covered:

escape() method helps you encode the content (string) used in a cookie by removing spaces and characters * @ - _ + . /.

JQuery way of doing cookies (you must have JQuery and cookie plugin to work!)

Cookie Object:

Cookies are text files that we deposit on and retrieve from the user's hard drive. (The cookie is a variable that is stored on our computer and Javascript or PHP can retrieve the information contained within the cookie)

The Cookie object requires setting a name and a value

By default, the cookie will expire when the browser is closed. You must specify an expiration date if you want the cookie to last longer

Session: Each visit to a Web page by a user

Syntax: document.cookie = "name value; expires = expiration; ";


document.cookie = "name value; "; (required)

Additional Property Statements you can add to your Cookie.

expires: The cookie will expire when the browser is closed unless specified otherwise.

path: Files on the server that can use the cookie

domain: by default only the domain that sets the cookie can use the cookie

secure: Sets how the information should be transmitted (HTTPS vs HTTP)

document.cookie = "mycookie = jon;
expires = Tue, 28 Dec 2010 00:00:00 GMT; ";


Local Storage vs Cookies:

Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the information is never transferred to the server.

localStorage and sessionStorage Objects:

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, week, or year. While thesessionStorage - stores data for one session.


Local Storage


// Browser supports localStorage and sessionStorage Code assigning storage


//  Message stating no support


document.getElementById("result").innerHTML="Last name: " + localStorage.lname;
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";



Cookies, Session,

split() vs indexOf()

escape() vs unescape()

Server Side vs Client Side Cookies,

First Party vs Third Party Cookies,




HTML Valid