Detailed explanation of JavaScript obtaining cookies and deleting cookies

Cookies, sometimes also used in their plural form Cookies, refer to the data (usually encrypted) stored on the user's local terminal by some websites in order to identify the user's identity and perform session tracking. In this article, we will share with you the knowledge of obtaining cookies and deleting cookies with JavaScript, hoping to help you.

Where do cookies exist?

Exists in document.cookie

What does the cookie look like?

Cookie is a string that looks like this:
"name=xxx; age=22;"

## Note: There is a space after the semicolon. Remember this, the following code needs special attention to this point

If I want to get the cookie based on the key name, how do I do it?

<span style="font-size: 16px;">function getCookie(name) {<br>  var value = '; '+ document.cookie;<br>  var parts = value.split('; ' + name + '=');<br>  if(parts.length === 2) {<br>    return parts.pop().split(';').shift();<br>  }<br>}<br></span>

Principle analysis:Assume that the current value of document.cookie is:
myName=xxx; age=22; food=apple; <span style="font-size: 16px;"></span>
①var value = '; '+ document.cookie;<span style="font-size: 16px;"></span>make it ; myName=xxx; age=22; food=apple;<span style="font-size: 16px;"></span>
②var parts = value.split('; ' + name + '=');<span style="font-size: 16px;"></span> Assume that the incoming name<span style="font-size: 16px;"></span> is age<span style="font-size: 16px;"></span>, then the string will be split according to ; age=<span style="font-size: 16px;"></span>. The array obtained after splitting is:
['myName=xxx', '22; food=apple;']<span style="font-size: 16px;"></span>
③ if(parts. length === 2)<span style="font-size: 16px;"></span> indicates that the corresponding value is obtained according to the key name, parts.pop()<span style="font-size: 16px;"></span> returns is the last item in the array, that is, 22; food=apple;<span style="font-size: 16px;"></span>, and then call split(';' )<span style="font-size: 16px;"></span>Get the array['22', 'food=apple;']<span style="font-size: 16px;"></span>, and then call shift()<span style="font-size: 16px;"></span> will return the first item of the array, which is 22, and we can get the value we want

Thoughts: var value = '; '+ document.cookie;<span style="font-size: 16px;"></span> This code is the essence of the entire method.

What if I want to delete cookies based on key names?

<span style="font-size: 16px;">function deleteCookie(name) {<br>  document.cookie = name + '=;  expires=Thu, 01 Jan 1970 00:00:01 GMT;'<br>}<br></span>

Principle analysis: Set the cookie expiration time to be less than the current time, then the cookie will be deleted.

#Where do cookies exist?

Exists in document.cookie

What does the cookie look like?

Cookie is a string that looks like this: "name=xxx; age=22;"

## Note: There is a space after the semicolon. Remember this. Pay special attention to this in the following code

If I want to get the cookie based on the key name, how to do it?

<span style="font-size: 16px;">function getCookie(name) {<br>  var value = '; '+ document.cookie;<br>  var parts = value.split('; ' + name + '=');<br>  if(parts.length === 2) {<br>    return parts.pop().split(';').shift();<br>  }<br>}<br></span>

Principle analysis:
Assume that the current value of document.cookie is: <span style="font-size: 16px;">myName=xxx; age=22; food=apple; </span>
①<span style="font-size: 16px;">var value = '; '+ document.cookie;</span>make it <span style="font-size: 16px;">; myName=xxx; age=22; food=apple;</span>
②<span style="font-size: 16px;">var parts = value.split('; ' + name + '=');</span> Assume that the incoming <span style="font-size: 16px;">name</span> is <span style="font-size: 16px;"> age</span>, then the string will be split according to <span style="font-size: 16px;">; age=</span>. The array obtained after splitting is:
<span style="font-size: 16px;">['myName=xxx', '22; food=apple;']</span>
③<span style="font-size: 16px;"> if(parts. length === 2)</span> indicates that the corresponding value is obtained according to the key name, <span style="font-size: 16px;">parts.pop()</span> returns is the last item in the array, that is, <span style="font-size: 16px;">22; food=apple;</span>, and then call <span style="font-size: 16px;">split(';' )</span>Get the array<span style="font-size: 16px;">['22', 'food=apple;']</span>, and then call <span style="font-size: 16px;">shift()</span> will return the first item of the array, which is 22, and we can get the value we want

Thoughts: <span style="font-size: 16px;">var value = '; '+ document.cookie;</span> This code is the essence of the entire method.

What if I want to delete cookies based on key names?

<span style="font-size: 16px;">function deleteCookie(name) {<br>  document.cookie = name + '=;  expires=Thu, 01 Jan 1970 00:00:01 GMT;'<br>}<br></span>

Principle analysis:
Set the cookie expiration time to be less than the current time, then the cookie will be deleted.

Related recommendations:

How to use cookies with jQuery

Cookie attribute and method analysis

Basic operations for adding and deleting cookies in JavaScript

The above is the detailed content of Detailed explanation of JavaScript obtaining cookies and deleting cookies. For more information, please follow other related articles on the PHP Chinese website!