Unit 8: Preserving state
Unit Essential Questions
You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.
Cookies and Sessions
- What are cookies and what purpose do they serve?
- What are sessions and what purpose do they serve?
- What’s the difference between a persistent cookie and a session cookie and when should each be used?
- What’re some legal considerations developers should be aware of when their sites use cookies?
Future of cookies
- What might be the future of cookies?
Unit Readings
Cookies and Sessions
- Read All About Cookies and/or Watch What Are Cookies? And How They Work
- Read Web security essentials(only read the ‘Sessions and Cookies’ sections) and/or Watch Cookies vs Sessions Explained: What You Need to Know
- Read Using the Web Storage API and/or Watch JavaScript Cookies vs Local Storage vs Session Storage
Check your understanding
If I store data on MyFakeSite.com using localStorage, close the browser, and then open a new window to visit MyFakeSite.com, will my data still be in my browser?
Click here to reveal the answer!
Yes! localStorage has no default expiration so the data is stored even after you close the tab/window/browser. On the other hand, sessionStorage expires after a tab/window/browser is closed.Programming Exercise
This optional exercise will have you practice with localStorage and sessionStorage.
Complete the code in this fiddle to store the inputs to the browser and then display the results. You should only need to update the JS code inside the
saveInfo()andupdateScreen()functions. Notice the difference when using localStorage vs sessionStorage:
- When using localStorage, the most recently used name and job should appear when you open the same fiddle in a new tab/window
- When using sessionStorage,
nullwill show up in lieu of a name and job when you open the same fiddle in a new tab/windowNote: While localStorage normally stores data indefinitely, because we’re working through JSFiddle’s servers (which for security clear out our storage) if you were to quit your browser completely and then re-open the fiddle, you wouldn’t have the local data stored anymore. Hence, when testing your fiddle, make sure to simply open a new tab or window with the same link rather than closing the browser completely.
Future of cookies
- Read Cookie Consent Requirements: Are You Doing Enough?
- Read GitHub says goodbye to cookie banners
- Read Charting a course towards a more privacy-first web
ExpressJS and Cookies [optional]
The readings below might be particularly useful if you’re planning on using NodeJS and working with something like user logins for your final project.
- Read ExpressJS - Cookies and/or Watch ExpressJS Tutorial - Cookies
- Read ExpressJS - Sessions
Additional Resources
Cookies and Sessions
- Read What are session cookies used for?
- Read What are persistent cookies used for?
- Read Using HTTP cookies
- Read Window: localStorage property
- Read Window: sessionStorage property
- Watch Difference between cookies, session and tokens