Introduction to the usage and disadvantages of cookies in JS

Cookie is such a mechanism. It can make up for the stateless shortcomings of the HTTP protocol. Before Session appeared, basically all websites used cookies to track sessions. The following article will introduce to you the use and shortcomings of cookies in JS. Friends who need it can refer to it

What is Cookie

Cookie means "Sweet cookie" is a mechanism proposed by the W3C organization and first developed by the Netscape community. Currently, cookies have become a standard, and all mainstream browsers such as IE, Netscape, Firefox, Opera, etc. support cookies.

Since HTTP is a stateless protocol, the server has no way of knowing the identity of the client from the network connection alone. How to do it? Just issue a pass to the clients, one for each person. No matter who visits, they must bring their own pass. This way the server can confirm the client's identity from the pass. This is how cookies work.

Cookie is actually a short piece of text information. The client requests the server. If the server needs to record the user status, it uses response to issue a cookie to the client browser. The client browser will save the cookie. When the browser requests the website again, the browser submits the requested URL together with the cookie to the server. The server checks this cookie to identify the user's status. The server can also modify the contents of the cookie as needed.

Cookie Mechanism

In the program, session tracking is a very important thing. Theoretically, all request operations of one user should belong to the same session, while all request operations of another user should belong to another session, and the two cannot be confused. For example, any product purchased by user A in the supermarket should be placed in A’s shopping cart. No matter when user A purchases it, it belongs to the same session and cannot be placed in user B’s or user C’s shopping cart. , which does not belong to the same session.

Web applications use the HTTP protocol to transmit data. The HTTP protocol is a stateless protocol. Once the data exchange is completed, the connection between the client and the server will be closed, and a new connection needs to be established to exchange data again. This means that the server cannot track the session from the connection. That is, user A purchases an item and puts it in the shopping cart. When the item is purchased again, the server cannot determine whether the purchase belongs to user A's session or user B's session. To track this session, a mechanism must be introduced.

Cookie is such a mechanism. It can make up for the stateless shortcomings of the HTTP protocol. Before Session appeared, basically all websites used cookies to track sessions.

JS setting cookie:

Assume that in page A, you want to save the value of variableusername ("jack") to the cookie, the key value is name, the corresponding JS code is:

 document.cookie="name="+username;

Semicolons (;), commas (,), equal signs (=) and spaces cannot be used in cookie names or values. It's easy to do this in the name of the cookie, but the value to be saved is undefined. How to store these values? The method is to use escape()function for encoding. It can express some special symbols in hexadecimal. For example, spaces will be encoded as "20%", which can be stored in the cookie value, and use This solution can also avoid the occurrence of Chinese garbled characters.

document.cookie="str="+escape("I love ajax"); 
// document.cookie="str=I%20love%20ajax";

When using escape() encoding, you need to use unescape() to decode after taking out the value to get the original cookie value.

JS reads cookie:

Assume that the content stored in the cookie is: name=jack;password=123

Then get the value of the variable username in page B The JS code is as follows:

var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

Read cookies

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

Cookie Disadvantages

Although cookies provide convenience in persisting client data and share the burden of server storage, they still have many limitations.

First: A maximum of 20 cookies are generated under each specific domain name

1.IE6 or lower versions can have a maximum of 20 cookies

2.IE7 and later versions There can be 50 cookies in the end.

3.Firefox has a maximum of 50 cookies

4.Chrome and Safari do not have hard limits

IE and Opera will clear the least recently used cookies, and Firefox will randomly clear cookies .

The maximum size of a cookie is approximately 4096 bytes. For compatibility, it generally cannot exceed 4095 bytes.

IE provides a storage that can persist user data, called uerData, which has been supported since IE5.0. Each data can be up to 128K, and each domain name can be up to 1M. This persistent data is placed in cache. If the cache is not cleared, it will always exist.

Advantages: Extremely high scalability and availability

1. Through good programming, control the size of the session object stored in the cookie .

2. Reduce the possibility of cookie cracking through encryption and secure transmission technology (SSL).

3. Only insensitive data is stored in the cookie. Even if it is stolen, there will be no major loss.

4. Control the lifetime of cookies so that they will not be valid forever. A thief may have obtained an expired cookie.

Disadvantages:

1. Limitation on the number and length of `Cookie`. Each domain can only have a maximum of 20 cookies, and the length of each cookie cannot exceed 4KB, otherwise it will be truncated.

2. Security issues. If the cookie is intercepted by someone, that person can obtain all session information. Even encryption will not help, because the interceptor does not need to know the meaning of the cookie, he can achieve the purpose by simply forwarding the cookie as it is.

3. Some states cannot be saved on the client. For example, to prevent duplicate form submissions, we need to save a counter on the server side. If we save this counter on the client side, it will have no effect.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free js online video tutorial

php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Introduction to the usage and disadvantages of cookies in JS. For more information, please follow other related articles on the PHP Chinese website!