This is the 20th day of my participation in the Genwen Challenge

I heard that biscuits are used in The UK instead of cookies… It’s strange.

Okay, let’s get started on cookies.

What are Cookies?

A Cookie, better known as an HTTP Cookie, is a small piece of data stored as a text file on a browser. Cookies associate bits of data with a particular user.

Cookies are mainly used for three purposes:

Session management

Login, shopping cart, game score, or anything else the server should remember.

personalized

User preferences, themes, and other Settings.

For example, user preferences, such as language and preferred themes, can be saved for future use.

tracking

Record and analyze user behavior.

When a user visits a shopping site and searches for an item, that item is saved in their browser history. Cookies can read browsing history, so similar content is displayed the next time the user visits.

The type of Cookie

Session cookie

Session cookies, also known as “temporary cookies,” help websites identify users and the information they provide as they browse the site. Session cookies retain information about the user’s activities only when the user is on the site. Once the Web browser is closed, the cookies are deleted.

Permanent cookies

A persistent cookie is also called a “persistent cookie.” They continue to run even after the Web browser is closed. For example, they can remember login details and passwords, so web users don’t have to re-enter them every time they use a site.

Third-party cookies

Third-party cookies are installed by third parties to collect certain information from web users for research on behaviors, demographics, or spending habits, among other things. They are typically used by advertisers who want to ensure that their products and services are marketed to the right target audience.

Flash cookie(Flash cookie)

Flash cookies are also known as “supercookies”. They are independent of web browsers. They are designed to be permanently stored on the user’s computer. These types of cookies remain on the user’s device even after all cookies are deleted from the user’s Web browser.

Zombie Cookie

Zombie cookies are flash cookies that are automatically recreated after the user deletes them. That means they are hard to find or manage. They are commonly used in online games to prevent users from cheating, but have also been used to install malicious software on users’ devices.

Secure Cookie

Only HTTPS sites can set secure cookies, that is, cookies with encrypted data. In most cases, the checkout or payment pages of e-commerce sites have secure cookies to facilitate more secure transactions. Similarly, Internet banking sites need to use secure cookies for security reasons.

Create cookies using Vanilla JavaScript

Note: For the code below to work, your browser must have local cookie support enabled.

JavaScript can create, read, and delete cookies using the document.cookie property.

Using JavaScript, you can create cookies like this:

document.cookie = "name=Linda Ojo";
Copy the code

You can also add an expiration date (UTC time). By default, cookies are deleted when the browser is closed:

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC";
Copy the code

Using the path parameter, you can tell the browser where the cookie belongs. By default, cookies belong to the current page.

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";
Copy the code

Just using plain JavaScript to handle cookies can quickly become tedious, which is why I prefer using JavaScript Cookie packages

Use JavaScript Cookie Package to process cookies

JavaScript Cookie is a simple lightweight JavaScript API for handling cookies. It works with all browsers, accepts any character, is heavily tested, and requires no dependencies. Amazing!!!!

The installation

Run the following command in the root folder to install JS-cookies.

npm install js-cookie --save
Copy the code

Cookie attribute

  • Expire: Defines the time at which cookies will be deleted. The value can be a number, which will be interpreted as the number of days from the creation Date or as an instance of Date.
  • Path: A string representing the Path visible to the cookie.
  • Domain: A string indicating the valid Domain to which the cookie should be visible. The cookie will also be visible to all subdomains.
  • Secure: true or false, indicating whether a Secure protocol (HTTPS) is required for cookie transmission.

Create a cookie

We can create a cookie that is valid throughout the site by providing a name and value as shown below.

import Cookies from 'js-cookie';

Cookies.set('name'.'value');
Copy the code

We can specify the time required for the cookie to expire cookie.set by passing an object containing the expiration date as the third argument in the method. The cookie created below will expire in 7 days. By default, cookies are deleted when the user closes the browser.

import Cookies from 'js-cookie';

Cookies.set('name'.'value', { expires: 7 });
Copy the code

Next, we can create a secure expired cookie that is valid only for the path of the current page. The path is added to the previous object that contains the expiration date.

Cookies.set('name'.'value', { expires: 7.path: ' '.secure: true });
Copy the code

Read the cookie

Cookies are created so that we can use them later. We can use the cookie. get method to access existing cookies. Let’s create and read a real cookie named “subject”.

import Cookies from 'js-cookie';
Cookies.set('theme'.'dark');
Cookies.get('theme') // => 'dark'
Copy the code

You can also update the cookie by overwriting its value

Cookies.set('theme'.'light');
Copy the code

The subject cookie now has a value of ‘light’.

We can retrieve all Cookies at once by calling cookie.getMethod without passing in any parameters, as shown below.

Cookies.get(); // => { theme: 'light' }
Copy the code

Delete the cookie

You can remove globally accessible cookies; cookie. remove runs the method value with only the first argument

Cookies.remove('theme');
Copy the code

Note: When deleting cookies and you do not rely on default properties, you must pass the exact same path and domain properties used to set cookies.

Let’s take the example of setting and deleting a cookie that is valid for the current page path.

Cookies.set('direction'.'north', { path: ' ' });
Cookies.remove('direction'); // fail!
Cookies.remove('direction', { path: ' ' }); // removed!
Copy the code

That’s all

More relevant articles and my contact information are listed here:

github.com/wanghao221

And finally, don’t forget ❤ or 📑