persistence maintaining state using cookies and queries
TRANSCRIPT
![Page 1: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/1.jpg)
PersistenceMaintaining state using cookies and queries
![Page 2: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/2.jpg)
State is the Problem
•What is state?
•facebook status
•mailbox flag
•conversations
•talking about what?
•talking to whom?
![Page 3: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/3.jpg)
HTTP Protocol
•Stateless by design!
•Your machine & the server do not know
•What website you were on
•What you just did on the website
•Who you are page to page
•Each page is INDEPENDENT / SEPARATE
![Page 4: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/4.jpg)
Why do you care?
•Maintain items in a shopping cart
•Website User Accounts
•Web Apps using more than ONE page
•Allow bookmarks of query results
•Polling, Statistics, Advertising
![Page 5: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/5.jpg)
Top 2 Techniques
•URL Query Strings
•Cookies
![Page 6: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/6.jpg)
Query string
•URL (Uniform Resource Locator)
•delineator character: ?
•location (http://google.com)
•query=”what is a cookie?”
•http://google.com?query=what%20is%20a%20cookie?
![Page 7: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/7.jpg)
write the right side of ?
•<form method=”get” ….>
•form tags’ names and values are converted into a URL query string onsubmit
•tag attributes containing URLs
•the DOM window.location object
![Page 8: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/8.jpg)
demo Google
![Page 9: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/9.jpg)
DOM location•location.search = string of the ? side
•String object has methods!
•substring(), substr()
•split() is extremely useful!
•.length = # of how long string is
•location.search.substring(start,length);
![Page 10: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/10.jpg)
Cookies
•AKA: tokens or tickets
•Browser stores a STRING of data for you
•Browser sends server STRING for every http connection it makes
•Server can send browser STRING to store as well
![Page 11: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/11.jpg)
How does it work?•Browser keeps STRING stored by
website
•Sends STRING only to that website unless
•Temporary - dies when browser quits
•Expiration date passed
•Max string size of 4KB
•Max 20 cookies per server
![Page 12: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/12.jpg)
document.cookie•string object but HACKED
•strict complex formatting rules
•String object methods are needed
•string must be valid URL!
•encodeURI() & decodeURI()
•add / remove %## codes; %20 = space
![Page 13: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/13.jpg)
Cookie attributes
•NOT an object (but should have been)
•so each “attribute” is formatted into the cookie string and the browser parses the info right back out again
•name=value; attribute=av; attribute2=av2
![Page 14: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/14.jpg)
Expires attribute
•Date → specified in UTC format
•Weekday Mon DD HH:MM:SS Time Zone YYYY
•Set manually or Date object/methods
•Delete cookie: set date in the past
![Page 15: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/15.jpg)
![Page 16: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/16.jpg)
Path attribute
•Determines availability of cookie to other Web pages on a server
•Syntax:
•document.cookie = (“x=123“ + “;path=/MyFiles”);
•Use slash (/) to indicate root directory
![Page 17: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/17.jpg)
Domain attribute
•Used for sharing cookies across multiple servers in the same domain
•Syntax:
•document.cookie =
•(“x=123“ + “; domain=.xyz.com”);
![Page 18: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/18.jpg)
Secure attribute
•Indicates that a cookie can only be transmitted across a secure Internet connection using HTTPS or another security protocol
•Syntax
•document.cookie =
•(“x=123“ + “; secure=true”);
![Page 19: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/19.jpg)
Reading Cookies
•Cookies are a string that must be parsed
•Decode cookie using decodeURI() method
•Use split() method to place each name=value pair into an array
•Use String object methods to extract required portions of each array element
![Page 20: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/20.jpg)
Simple Example•document.cookie=
encodeURI("name=mycookie string; secure");
•x = document.cookie
•x is name=mycookie%20string; oldname=oldcookie
•you may see cookies returned! use split()
![Page 21: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/21.jpg)
DEMO
![Page 22: Persistence Maintaining state using cookies and queries](https://reader035.vdocuments.net/reader035/viewer/2022062322/5697bfaf1a28abf838c9d38b/html5/thumbnails/22.jpg)
Security
•Queries are not secure
•Cookies are not secure
•Easily accessible and editable!
•Cookies can be set secure - browser will only send over HTTPS but are not that safe