IT350: Web & Internet Programming Set 15: Cookies Information Example https://www.usna.edu/Users/cs/adina/teaching/it350/fall2016/solutions/cookies/info.html (“info” link on today’s calendar) How does the second page know what you entered? 1
JavaScript: Using Cookies Cookie – A string: _________________________ – Accessed through document.cookie – Separate multiple cookies by semicolon ; – Set expiration date using expires keyword – escape function to convert non-alphanumeric characters to hexadecimal escape sequences – unescape function reverses the conversion Why cookies? 2
JavaScript: Using Cookies Accessing a cookie var cookies = document.cookie .split (“;”); for( i = 0; i < cookies.length; i++ ) var cookie = cookies[i ].split(“=“); … Setting a cookie document.cookie = "name=" + escape("J Smith"); Exercise #1: JS Ask user for favorite quote using a window prompt. Save quote in a cookie identified by “favQuote”. Display quote on the page. 3
Storing Cookies – More Realistic • By default, cookies expire when session ends • Set “expires” attribute to make it stick around function createCookie(identifier, value, days) { if( days ) { var date = new Date(); date.setTime( date.getTime()+(days*24*60*60*1000) ); var expires = "; expires=“ + date.toGMTString(); } else var expires = ""; document.cookie = identifier + "=“ + escape(value) + expires; } function eraseCookie(identifier) { createCookie(identifier, "", -1); } Reading Cookies – More Realistic // Return the 'value' of the cookie with identifier 'desiredId' // returns null if no match found. function readCookie(desiredId) { // First split the pairs apart on '; ' var pairs = document.cookie.split("; "); // Now split each pair on '='. Check if have a match for (var i=0; i < pairs.length; i++) { var aPair = pairs[i]; // split into desired parts and check for match var cookieTokens = aPair.split("="); var id = cookieTokens[0]; var value = cookieTokens[1]; if (id == desiredId) { // found desired cookie -- return value return unescape(value); } } return null; // no match } 4
Exercise #2: JS Read the value of a cookie named “favQuote”. Display it in a pop- up message if it exists, otherwise display “no quotes” Cookies – Java Script and PHP Cookies with JavaScript – Create cookie ( document.cookie = “color=red”) – Read cookie ( document.cookie ) – Where are cookies stored?? Cookies with PHP – Demand that the browser create a cookie with “ setcookie ” – Browser always sends appropriate cookies back to server with request – Read cookie • $_COOKIE super-global variable – Where are cookies stored?? 5
HTTP Protocol – HTTP Response HTTP/1.0 200 OK Set-Cookie : theme=light Set-Cookie : session=5gd7324dx; Expires=Wed, 11 Oct 2018 12:27:03 GMT Content-type : text/html <!DOCTYPE html> <html xmlns =“http://www.w3.org/1999/ xhtml ”> … Create Cookies with PHP (Assume this file invoked from a HTML form with fields name, height, and color) <?php require('page.inc.php'); $name = $_POST["name"]; $height = $_POST["height"]; $color = $_POST["color"]; $expires = time() + 86400; setcookie("Name",$name,$expires); setcookie("Height",$height,$expires); setcookie("Color",$color,$expires); $page = new Page("Storing Cookies"); $page->content = "<h1>A cookie was stored!</h1>"; $page->content .= "<h2>Name: $name <br> Height: $height <br> Color: $color</h2>"; $page->display(); ?> 6
Read Cookies With PHP <?php require("page.inc.php"); $page = new Page("Reading cookies"); $name=""; $height = ""; $color = ""; if (isset($_COOKIE["Name"])) $name = $_COOKIE["Name"]; $height = $_COOKIE["Height"]; $color = $_COOKIE["Color"]; if (!empty($name) && !empty($height) && !empty($color)) { $page->content = "<h1>Some cookies were found!</h1>"; $page->content .="<h2>Name: $name</h2>"; $page->content .="<h2>Height: $height</h2>"; $page->content .="<h2>Color: $color</h2>"; } else{ $page->content ="<h1>Could not find cookies for Name, Height, or Color</h1>"; } $page->display();?> Exercise #3: PHP (track users) When PHP is called, look for a “ sessionID ” cookie. If present, print “Welcome back” (in HTML). If the cookie doesn’t exist, create a random ID and set the cookie. Print “Welcome visitor!” (hint: generate a random number with rand()) 7
Exercise #4: PHP a)Create a cookie called “ favQuote ” with value “DTT/FSA”. b)Then change your program to instead use the quote provided by the user through a form submission with param name “quote”. Remember • Relevant cookies always sent by browser to the server • Can create with JavaScript and read with PHP • Or create with PHP and read with JavaScript 8
Recommend
More recommend
