Detailed explanation of cookie read and write operation examples in js

Cookies have a validity period. The default validity period of a cookie is from when the cookie is generated to when the browser is closed. You can also specify the expiration date by setting the validity period of the cookie. Users can also ban cookies or delete cookies manually

A cookie is a small piece of information, a string of key/value pairs stored on the computer's hard drive. The storage capacity of a cookie is about 4kb. Different browser manufacturers have slightly different restrictions on cookie size; the main essence of a cookie is "Identify" to do something by identifying it; cookies cannot obtain any other data from your hard drive, transmit computer viruses, or obtain your email address. Cookies have a validity period. The default validity period of a cookie is from when the cookie is generated to when the browser is closed. You can also specify the expiration date by setting the validity period of the cookie. Users can also disable cookies or manually delete cookies.

A cookie is a string and a text string in a specific format

Format:

cookieName=cookieValue;expires=expiresDate;
path=URLpath;
domain=siteDomain
//cookie名称，失效日期，储存URL,储存域值；

How to create a cookie

We usually encapsulate setting cookies into a function:

function addCookie(sName,sValue,day) { 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+day);; 
//设置失效时间 
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
}

Read cookies

After adding cookies, how do we get it? , very simple:

function getCookies() { 
var showAllCookie = ''; 
if(!document.cookie == ''){ 
var arrCookie = document.cookie.split('; '); 
//用spilt('; ')切割所有cookie保存在数组arrCookie中 
var arrLength = arrCookie.length; 
for(var i=0; i<arrLength; i++) { 
showAllCookie += &#39;c_name:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[0]) + &#39;c_value:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[1]) + &#39;<br>&#39; 9 } 
return showAllCookie; 
} 
}

Cookies have a validity period and can be automatically deleted, or they can be deleted immediately by setting their expiration date.

It is also very simple, continue:

function removeCookie() { 
if(document.cookie != '' && confirm('你想清理所有cookie吗？')) { 
var arrCookie = document.cookie.split('; '); 
var arrLength = arrCookie.length; 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 
for(var i=0; i<arrLength; i++) { 
var str = arrCookie[i].split(&#39;=&#39;)[0]; 
document.cookie = str+ &#39;=&#39; + &#39;;expires=&#39; + expireDate.toGMTString(); 
} 
} 
}

We already know how to create, obtain, and delete cookies, now it’s time to use cookies

Let’s use cookies to make a simple timer:

var cookieCount = {}; 
cookieCount.count = function () { 
var count = parseInt(this.getCount('myCount')); 
count++; 
document.cookie = 'myCount=' + count + ''; 
alert('第'+count+'访问'); 
} 
cookieCount.setCount= function () { 
//首先得创建一个名为myCount的cookie 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+1); 
document.cookie = 'myCount=' + '0' +';expires=' + expireDate.toGMTString(); 
} 
cookieCount.getCount = function (countName) { 
//获取名为计数cookie,为其加1 
var arrCookie = document.cookie.split('; '); 
var arrLength = arrCookie.length; 
var ini = true; 
for(var i=0; i<arrLength; i++) { 
if(countName == arrCookie[i].split(&#39;=&#39;)[0]){ 
return parseInt(arrCookie[i].split(&#39;=&#39;)[1]); 
break; 
}else{ 
ini = false; 
} 
} 
if(ini == false)this.setCount(); 
return 0; 
} 
cookieCount.count();

Cookie path

The cookie path was mentioned at the beginning of this article. Set the cookie path: path=URL;

If the cookie is created in a subdirectory of the domain name, the domain name and other This cookie cannot be accessed from the same level directory or the upper level directory. The advantage of setting the path is that it can access the domain name and subcategory directories of the domain name, as follows:

document.cookie='cookieName=cookieValue;expires=expireDate;path=/'

cookie Domain

Set domain: domain=siteDomain

This is mainly used to share a cookie in the same domain, such as "www.taobao.com" and "ued.taobao.com" "The two share a domain name "taobao.com". If we want the cookies under "www.taobao.com" to be accessed by "ued.taobao.com", then we need to set the path attribute to "/", and Set the domain of the cookie-->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com'.

With the continuous development of web projects, HTML5 provides two properties, window.sessionStorage and window.localStorage, and carries methods such as setItem, getItem, removeItem, clear, etc., making it possible to store data locally. The operation is simpler and more convenient.

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!