Self-learning record (always updated 🌺)

The basic characteristics of the three

Characteristics of the cookie localstorage sessionStorage
Valid time 1.A session cookie: Does not set its life cycle expires state. The browser opens and closes a session. When the browser is closed, the session cookie will be destroyed with the browser. Session cookie destruction is not affected when a page is closed. The session cookie is just like the single buying and selling process when we do not deal with the loyalty card. After leaving, the information is destroyed. 2.Persistent cookiesA cookie, like a commodity, has an expiration date. Once the browser is closed, it won’t be destroyed until the expiration date is set. For persistent cookies, data can be transmitted in the same browser. For example, after you open a Taobao page to log in, you click on a product page and still log in. Even if you close the browser and open it again, it will still log in. This is because cookies automatically send data to the server, and the results come back. A persistent cookie is like a loyalty card that holds information until it is destroyed, even after we leave. Data permanence: that is, once assigned, the value will exist no matter how long, unlessManually removeOtherwise keep it forever Introduced aBrowser window(1) The current browser window is not closed, even if the page is refreshed or enter the same-origin page, data still exists. â‘¡ After the window is closed, the data is destroyed. â‘¢ Open separate and different ones at the same timeThe Denver nuggetsPage, sessionStorage object is also different.
Storage size The value cannot exceed 4KB Usually 5MB or more Usually 5MB or more
Communicates with the server Data is always carried (even if it is not needed) in a same-origin HTTP request, which is passed back and forth between the browser and the server Data is not automatically sent to the server and is stored locally Data is not automatically sent to the server and is stored locally

1. The use of cookies

Github NPM install js-cookie –save github NPM install js-cookie –save

Js create cookies
document.cookie='name=mm' 
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT' 
// The expires parameter specifies an expiration time (UTC, GMT).
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /; '
The path argument tells the browser the path of the cookie. By default, cookies belong to the current page.
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /; domain=.juejin.im'
Copy the code
Js reading cookies
function getItem(_name) {
	var _cookie = document.cookie.split('; ')
	for(let i = 0; i < _cookie.length; i++) {
		var arr = _cookie[i].split('=')
		if (arr[0] === _name) {
			return arr[1]
		}
	}
}
getItem('name')
Copy the code
Js deleting cookies

Set the cookie to an expired time

2. Use the sessionStorage

sessionStorage.setItem('name'.'mm')
var cat = sessionStorage.getItem('name')
sessionStorage.removeItem('name')
sessionStorage.clear()
Copy the code

3. The use of localStorage

localStorage.setItem('name'.'mm')
var cat = localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.clear()
Copy the code
Noun notes:(🌺 may be misunderstood, please correct)

1. Homology: In biological phylogeny, two or more structures are said to be homologous if they have the same ancestor