The javascript column introduces the different usage of cookies.
Operating cookies with JS is actually very troublesome. There is no simple API that allows us to get or set cookies.
The only API that manipulates cookies is document.cookie, but this code is 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 a new API: cookieStore. This is an asynchronous API, which makes it easy to get 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.
Obtaining Cookies
Just now we have learned how troublesome it is to obtain a required cookie before, and now we can get the content we want with just one sentence.
CookieStore.get has two function signatures. The former can be obtained by passing in the attributes of the cookie to match the desired content, and the latter is obtained by directly passing in the name. The API is intuitive, and I don't know where it is better than the previous method.
Of course, in addition to obtaining a single cookie, the new API also provides a way to obtain multiple cookies. For example, if I want to get all the cookies belonging to a certain domain, I can use the following method:
Cookie settings
before if we need to set Cookie, you should write code like the following, still in operation 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 use cookieStore.set to easily set cookies:
The set function supports two types of signatures. The former can set all the content on the Cookie, and the latter is in the form of key-value.
Deleting Cookies
After getting and deleting Cookies, then the corresponding deletion operations are definitely indispensable.
Before that, if you want to delete a cookie, you need to set the expiration time of the cookie in the past, and it will expire naturally.
var delete_cookie = function(name) {
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};复制代码
It seems strange that I want to delete a cookie not to delete the field, but to 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. The simple string is equivalent to the name of the cookie that needs to be deleted. When an object is passed, the signature is slightly different from before. Note that the optional attributes in the signature have default values:
dictionary CookieStoreDeleteOptions {
required USVString name;
USVString? domain = null;
USVString path = "/";
};复制代码
Monitoring Cookie changes
This function should not be available before. Now you can monitor Cookie changes and deletions through the new API.
When we set or delete the Cookie, the corresponding event will throw out the content we changed.
Finally, the
above is the content of this article, the link is the cookieStore document, interested readers can understand.
The front-end frontier observer series theme is to focus on new APIs, specifications, technologies, etc. in the front-end direction. Although we may not enjoy the benefits of these APIs in the short term, someday or polyfills will let us use these things.
This article comes from the javascript column of php Chinese website : https://www.php.cn/course/list/17.html