Cookie can actually be adjusted like this

The

javascript column introduces the different uses of cookies.

Using JS to operate Cookies is actually very troublesome. There is no simple API that allows us to obtain or set Cookies.

The only API that operates Cookie is document.cookie, but this code is very uncomfortable to use. If we want to get a required Cookie, we may have to write such a utils function first:

function getCookie(name) {  const value = `; ${document.cookie}`;  const parts = value.split(`; ${name}=`);  if (parts.length === 2) return parts.pop().split(';').shift();
}复制代码

But in Chrome 87 version we no longer need to introduce such code, instead it is a new API: cookieStore. This is an asynchronous API that can easily obtain settings and monitor cookie changes.

If you want to download the beta version of Chrome, you can get it at this link .

The following is an introduction to the new content.

Getting Cookie

Just now we have learned how troublesome it was to get a required Cookie before. Now we can get the content we want in just one sentence.

cookieStore.get There are two function signatures. In the former, we can match the desired content by passing in the cookie attributes, and in the latter, Directly pass in name to obtain. The API is very intuitive and is infinitely better than the previous approach.

Of course, in addition to obtaining a single cookie, the new API also provides a way to obtain multiple cookies. For example, now if I want to get all the cookies belonging to a certain domain, I can use the following method:

Set Cookie

If we need to set Cookie before If so, you should write code similar to the following, still operating document.cookie

const setCookie = (name, value, days = 7, path = '/') => {  const expires = new Date(Date.now() + days * 864e5).toUTCString()  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}复制代码

Now we can easily set cookies through cookieStore.set:

set function supports two signatures, the former can set the content on all cookies, and the latter is key-value form.

Delete Cookie

After talking about obtaining and deleting Cookie, the corresponding deletion operation is definitely indispensable.

Before this, if you wanted to delete a cookie, you needed to set the expiration time of the cookie in the past. Once it expires, it will automatically become invalid.

var delete_cookie = function(name) {    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};复制代码

It seems strange. If you want to delete a cookie, you don’t delete the field, but expire it. Now that we have a new API, we don’t need to do this:

Similarly, the delete API also has two function signatures, a simple string It is equivalent to the name that needs to be deleted. When passing an object, the signature is slightly different from before. It should be noted that the optional attributes in the signature have default values:

dictionary CookieStoreDeleteOptions {
  required USVString name;
  USVString? domain = null;
  USVString path = "/";
};复制代码

Monitoring Cookie Change

This function should not have existed before. Now you can monitor the changes and deletions of Cookies through the new API.

When we set or delete Cookie, the corresponding event will throw out the content we changed.

Finally

The above is the content of this article. The link is the document of cookieStore. Interested readers can learn more.

The theme of the Front-end Frontier Observer series focuses on new APIs, specifications, technologies, etc. in the front-end direction. Although we may not be able to enjoy the benefits of these APIs in the short term, one day or polyfill will allow us Use these things.

Related free learning recommendations: javascript(Video)

The above is the detailed content of Cookie can actually be adjusted like this. For more information, please follow other related articles on the PHP Chinese website!