Human language:
Cookies and Cache - are two ways to store data on a client’s machine in order to speed up and improve the user's experience and performance of web pages. They are messages and memories of who you are, what you did online, what choices you made, how you can be recognized the next time you log in, and how that login can be speeded up. Although both Cookies and Cache are designed to store data, the types of data and the way to achieve the main goal are different.
Cache - is a memory area on the hard disk where the browser stores the web objects or internet files on the user’s machine. Therefore, it is a collection of data downloaded to help load and display a web page faster by saving heavier webpage resources on your device.
There are two types of cache: Browser cache and Proxy cache.
Browser cache
Whenever a user visits a website for the first time, the web browser gathers the content or information regarding that particular website such as HTML pages, images, video, JavaScript, CSS, graphics, animation, GIFs, etc. Since they are copies of web content, they run into gigabytes and these files sends over to the browser (client-side), and the browser stores them on the user's device.
Caches do not have a single type of extension. They may be found in the temporary folders on your device and the Settings section on your browser. Whenever a user visits a website again, at first the browser inspects objects in its cache before requesting it from the website server, and because these elements are already downloaded on your device, the site loads faster.
Caching certainly reduces the load, and bandwidth requirement and increases the speed of the delivery of web resources to the end user. Experts recommend clearing off cached or accumulating data regularly to boost up your machine.
Proxy caching is a feature of proxy servers that stores content on the proxy server itself, allowing web services to share those resources with more users.
Cookies (also called HTTP cookies or web cookies) - are usually small text files stored on the client's computer that contain information useful to a website - such as a password, preferences, browser ID, IP Address, location, date and time of visit, etc.
Whenever a user surfs the internet, the server sent a small text file - cookie in the response header from an HTTP server and stored on the user's computer. Every time the user loads the website again, the cookie facilitates the server to identify the client based on cookie information. All cookie files end in .txt, and that’s how we identify them.
Cookies often track information like what choices the user made, how the uses can be recognized the next time he logs in, how frequently the user visits, what are the times of visits, what banners have been clicked on, what button clicked, user preferences, items in a shopping cart, etc. Therefore, when you log out and come back, the site recognizes you and is glad to welcome you back. This allows the site to present you with information customized to fit your needs.
Cookies are not intended to cause any damage to the user’s computer, as they do not contain executable code. Although, marketers often use cookies to understand what users like on a site. Based on these files, they show relevant ads to users. Even when we are on different sites, for example, Facebook or Instagram, businesses still display ads we might like. All are based on cookies. And cookies of different sites can interact.
Types of cookies are:
Transient cookie: This type of cookie live for the lifetime of the session.
Persistent cookie: This cookie remains on the user’s computer beyond the lifetime of the session.
Cookies Vs Cache
Cache stores HTML pages, images, video, JavaScript, CSS, graphics, animation, GIFs etc VS Cookies stores passwords, preferences, browser ID, IP Address, location, date and time of visit, etc ;
In Cache, the content of the website is saved only in a single direction - from server to browser/device (client-side) without using HTTP requests in the process of storing the information VS In Cookies, the content of the website is saved both from the server to the browser and back the same way. (client and server sides) and are sent as HTTP requests/responses;
Cache could consume a large space as it stores various web contents VS Cookies consume less space because it stores text files (usually size of 4 Kb more or less);
Cache has to be manually removed VS Cookies are erased automatically on some browsers after their expiration date;
Cache can never cause any harm to the user’s computer VS Cookies can compromise users' privacy, attackers use modern methods to misuse cookies for collecting personal data;
The types of cache are: Browser cache and proxy cache VS Types of cookies are: Transient and persistent cookies.
Life example:
Let's take a look at the example of the Cache and Cookies
Example 1: Cache
Imagine that we launch any website with the product via our browser, for example, Google Chrome. After launching it, we can see lots of images, which our Home Page consists of
During the first launch, all of these images upload from the server of the website and store in our cache Why does it happen? The answer is quite simple, for example, the image from the top banner of our website uploads for ~ 9 ms from our cache after launching our Home Page for the second time
But, if try to re-launch our website with an empty cache
Our browser will upload the image of our top banner again from the server, and it will be ~ 33ms to upload it, which would mean 4 times longer than when uploading the same image from the cache
Example 2: Cookies
Imagine that we launch an online store with the products via our browser, for example, Google Chrome. After the launch, we registered on this website using user credentials: Email: qaengineerproton.me@proton.me Password: Tester12345 and after browsing several web pages, we added several products to the shopping bag. Then without placing the order, we left the website. If we launch our website for the second time, we will see the login page. The login page consists of the field: 'an email or mobile phone number', and after clicking on it, we will see the list with the login credentials which was used before. These are our cookies - small text files stored on the client's computer that contain information useful to a website, in our case the user's login credentials
After we successfully log in, we will see the products which were added to our shopping bag or wishlist, a list with sections with recommendations, last visited, and so on. All of these things are stored in our cookies
Conclusion:
So, if you are asked at an interview: What are cookies? What is cache? What is the difference between Cache and Cookies? The best way to answer is: Cache - is a memory area on the hard disk where the browser stores the web objects or internet files on the user’s machine. Therefore, it is a collection of data downloaded to help load and display a web page faster by saving heavier webpage resources on your device. Cookies (also called HTTP cookies or web cookies) - are usually small text files stored on the client's computer that contain information useful to a website - such as a password, preferences, browser ID, IP Address, location, date and time of visit, etc. Cookies Vs Cache
The Cache stores HTML pages, images, video, JavaScript, CSS, graphics, animation, GIFs etc VS Cookies stores passwords, preferences, browser ID, IP Address, location, date and time of visit, etc ;
In Cache, the content of the website is saved only in a single direction - from server to browser/device (client-side) without using HTTP requests in the process of storing the information VS In Cookies, the content of the website is saved both from the server to the browser and back the same way. (client and server sides) and are sent as HTTP requests/responses;
The cache could consume a large space as it stores various web contents VS Cookies consume less space because it stores text files (usually size of 4 Kb more or less);
Cache has to be manually removed VS Cookies are erased automatically on some browsers after their expiration date;
The cache can never cause any harm to the user’s computer VS Cookies can compromise users' privacy, attackers use modern methods to misuse cookies for collecting personal data;
The types of cache are: Browser cache and proxy cache VS Types of cookies are: Transient and persistent cookies.