1. When reading cookies, you can get a string through document.cookie and parse it into an object; 2. When setting cookies, you need to assign a value to document.cookie and add expiration time, path and other options; 3. When deleting cookies, you need to set the expired time and ensure clearing through the same path domain name; 4. Notes include not having sensitive information, processing encoding, limiting length and adding security attributes. The full text revolves around the methods and details of native JS operating cookies.

Handling cookies on web pages is actually a very common task in front-end development, especially when it is necessary to save user status or do some simple local data storage. It is not complicated to operate cookies with native JavaScript (that is, vanilla JS). You only need to understand how the document.cookie API is used.

How to read cookies?

document.cookie is a string property that returns all cookies on the current page, in the format of a key-value pair with name=value, separated by a semicolon and space.

for example:

 console.log(document.cookie);
// Output: username=JohnDoe; visited=true

If you want to convert them into objects for easy use, you can write a small function to parse:

 function getCookies() {
  const cookieStr = document.cookie;
  const cookies = {};
  if (!cookieStr) return cookies;

  cookieStr.split('; ').forEach(cookie => {
    const [name, value] = cookie.split('=');
    cookies[name] = decodeURIComponent(value);
  });

  return cookies;
}

This way you can access it through cookies.username .

How to set cookies?

Setting cookies is also done through the document.cookie attribute. You can assign values directly:

 document.cookie = "username=JohnDoe";

However, we will generally add some options, such as expiration time, path, domain name, etc.:

• expires: Specify the expiration time (UTC time format)
• max-age: Survival time in seconds
• path: Specify which paths can access this cookie, the default is the current path
• domain: Specify the domain name
• Secure: Send only under HTTPS
• samesite: Prevent CSRF attacks

For example:

 document.cookie = "visited=true; max-age=86400; path=/";

The above line of code sets the visited cookie, survives for one day (86400 seconds), and it can be accessed by the entire website.

Note: If you do not set expires or max-age, then this cookie is a "session cookie" and will be cleared after the browser is closed.

How to delete cookies?

In fact, there is no special deletion method, but it is achieved by setting an expired cookie:

 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

This way the browser will clear the cookie.

But to ensure that it can be deleted, it is best to bring the original path and domain settings, otherwise it may not be deleted due to different paths.

 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Some common things to note

• Do not store sensitive information : cookies will be automatically sent with requests, so they are not suitable for placing sensitive data such as passwords and tokens.
• Note the encoding problem : If there are special characters in the value part, you should first use encodeURIComponent to encode.
• Length limit : Each cookie should not be too long, and the total size is also browser limit (usually about 4KB).
• Security settings : If you want to improve security, remember to add Secure and SameSite=Strict/Lax.

Basically that's it. Although many people now use localStorage for client storage, cookies are still very important in handling server sessions, login status, etc. Mastering basic cookie operations is very helpful for front-end and back-end interactions.

The above is the detailed content of How to handle cookies in vanilla JavaScript?. For more information, please follow other related articles on the PHP Chinese website!