Web Programming Step by Step, 2nd Edition

Lecture 23: Client-side Cookies and Data Storage

Reading: 14.2

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

14.2: Programming with Cookies

Client-side cookies

cookie exchange

Cookies in JavaScript

document.cookie = "name=value";
document.cookie = "username=smith";   // setting two cookies
document.cookie = "lastlogin=Dec 1 2045";
...
alert(document.cookie);               "username=smith; lastlogin=Dec 1 2045"

Examining individual cookies

var cookies = document.cookie.split(";");    // ["username=smith", "lastlogin=Dec 1 2045"]
for (var i = 0; i < cookies.length; i++) {
	var eachCookie = cookies[i].split("=");    // ["username", "smith"]
	var cookieName = eachCookie[0];            // "username"
	var cookieValue = eachCookie[1];           // "smith"
	...
}

Cookie with expiration

// expire at a specific date/time
document.cookie = "username=smith; expires=Fri, 16 Nov 2012 20:47:11 UTC";

// expire 7 days from now
var date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));   // add 7 days
document.cookie = "username=smith; expires=" + date.toGMTString();

Deleting a cookie

document.cookie = "username=; expires=Thu, 01-Jan-1970 00:00:01 GMT";  // delete
...

Provided Cookie library

<!-- using the instructor-provided Cookie.js class -->
<script src="http://www.webstepbook.com/Cookie.js" type="text/javascript"></script>
Cookie.set("username", "smith");
// (later)
alert(Cookie.get("username"));   // smith

Limitations of client-side cookies

cookie wtf

Local data storage

localStorage["name"] = "value";
localStorage["username"] = "smith";
localStorage["lastlogin"] = "Dec 1 2045";
...
alert(localStorage["username"]);   smith

More about local storage

alert(localStorage["username"]);        // smith
localStorage.removeItem("username");
localStorage.clear();

Local data storage

sessionStorage["name"] = "value";
sessionStorage["favoritecolor"] = "blue";
sessionStorage["age"] = 19;

Local SQL databases in JavaScript

var name = openDatabase("dbName", "version", "description", size);
name.transaction(function(tx) {
	tx.executeSql("query", [arguments], callback, errorCallback);
	...
});
var db = openDatabase("myuw", "1.0", "UW Student Data", 2 * 1024 * 1024);
db.transaction(function(tx) {
	tx.executeSql("CREATE TABLE students (name, age)");
	tx.executeSql("INSERT INTO students VALUES ('Bart', 10)");
	tx.executeSql("INSERT INTO students VALUES ('Lisa', 8)");
});

Querying a local SQL database

db.readTransaction(function(tx) {
	tx.executeSql("SELECT * FROM students", [], function(tx, result) {
		// loop over the rows of results
		for (var i = 0; i < result.rows.length; i++) {
			alert("Student " + result.rows.item(i).name + " is age " + result.rows.item(i).age);
		}
	});    // Bart is age 10
});      // Lisa is age 8

Viewing local data

viewing local storage