What are cookies?
Key Takeaways
This video explains how cookies work on the web, using the Chrome browser as an example, and covers the basics of cookies, including how they are set, stored, and sent back to web servers.
Full Transcript
[Music] By design, the web has no memory. Every time you open a web page, the website you're visiting has no way of knowing if you're the same person who visited previously. Well, this helps keep communication efficient and simple since there's no need for a mechanism to track requests and responses. But it also turns out to be a problem. For example, how can an online store have a shopping cart if it can't remember what you added? Well, cookies were invented to solve that problem. So, imagine that you visit the homepage of the website cats.ample and the site wants to show you a random image of a cat and keep a record of which cat you saw. Well, here's how to do that with cookies. So, when you visit the site, your web browser makes a request to the cats.ample web server for the files that are used on the page, including the cat.jpeg image file, and the web server at cats.ample responds with the file. A request to a web server and the response to that request can include extra information called headers along with the file itself. A set cookie header in a response from a server tells your browser to store some text, a name, and a value in a file. And this stored file is known as a cookie. The cats.ample Example, web server includes the set cookie cat equals tabby header in response to the request for the cat.jpeg image file. Your browser receives the file, displays the image, and processes the set cookie header that went with it. As a result, your browser stores a cookie with the name cat and the value tabby. And from now on, your browser sends the header cookie cat equals tabby with requests to the cats.ample web server. And when the cats.example web server receives a request, it can process the cookie and do whatever it wants with that value, such as making sure it doesn't send you an image of the same tabby cat again. So once again, here's the whole process from start to finish. Your browser requests an image file from the cats.ample example web server. The cats.example server responds with the file and the response includes the header set cookie cat equals tabby. Your browser stores the cookie and from now on your browser includes the header cookie cat equals tabby whenever it makes a request to cats.ample. In other words, the web server includes a set cookie header with a response and that tells your browser to store the cookie. And because of that, your browser includes a cookie header with a request and that sends the cookie back to the web server. Note that a cookie is only sent to the site that sets it. For example, a cookie set by cats.ample example won't be sent in requests to a different site such as dogs.ample. And the cookies I've described in this example are set by code running on a web server. Now, websites can also create cookies using JavaScript code in web pages running locally in your web browser. So, thanks for watching. Be sure to check out all the videos in the cookie basics series. We have a guide and demos to go along with this video and more resources on our website to help you understand how cookies work. [Music]
Original Description
A simple guide to help you understand how cookies work on the web.
Resources:
What are cookies documentation → https://goo.gle/4khEwe7
Watch more What is Privacy Sandbox? → https://goo.gle/Privacy-Sandbox
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Sam Dutton
Products Mentioned: Chrome
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Chrome for Developers · Chrome for Developers · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
Web Directions Code 2015 round up
Chrome for Developers
Maintainable Code - HTTP203
Chrome for Developers
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
The Guardian - Supercharged
Chrome for Developers
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
The Future of JavaScript - HTTP203
Chrome for Developers
Data Binding 101 -- Polycasts #28
Chrome for Developers
The Guardian part 2 - Supercharged
Chrome for Developers
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
Binding to Objects -- Polycasts #30
Chrome for Developers
Player FM - Supercharged
Chrome for Developers
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
Jake Beats Wikipedia - HTTP203
Chrome for Developers
Supercharged Observers! -- Polycasts #32
Chrome for Developers
Jai's Web blog - Supercharged
Chrome for Developers
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
Google+ Performance Improvement Comparison
Chrome for Developers
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
Binding to Arrays -- Polycasts #35
Chrome for Developers
HTTP2 - HTTP203
Chrome for Developers
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
Call For Submissions - Supercharged
Chrome for Developers
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers
More on: Tool Use & Function Calling
View skill →Related Reads
📰
📰
📰
📰
Basic Git Command and What is Git
Medium · Programming
When to Use an ORM vs SQL and Query Builders
Dev.to · Doogal Simpson
Alarmas que despiertan por causa real, no por un número random
Dev.to · Franchesco Romero
[MM’s] Boot Notes — Understanding Bean Registration Mechanisms
Medium · Programming
🎓
Tutor Explanation
DeepCamp AI