Detailed explanation of Js cookie operation (setting, reading, deleting) examples

Js Cookie Operation Summary (setting, reading, deleting), often used in work! The following is the detailed code. If there are any errors, please leave a message to correct me!

JavaScript is a script that runs on the client side, so it is generally not possible to set up a Session because the Session runs on the server side.

The cookie runs on the client, so you can use JS to set the cookie.

Suppose there is such a situation, in a certain use case process, jump from page A to page B, If you use JS to save the value of a certain variable using the variable temp in page A, you also need to use JS to reference the variable value of temp in page B. The life cycle of global variables or static variables in JS is limited. , when a page jump occurs or the page is closed, the values ​​of these variables will be reloaded, that is, the saving effect is not achieved. The best solution to this problem is to use cookies to save the value of the variable. So how to set and read cookies?

First of all, you need to understand the structure of cookies a little bit. Simply put: cookies are saved in the form of key-value pairs, that is, in the key=value format. Each cookie is usually separated by ";".

JS setting cookie:

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

document
.cookie="name="+username;

JS reads cookie:

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

Then The JS code to obtain the value of the variable username in page B 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;
}

Delete 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");

[Related recommendations]

1. How to disable cookies and solve the problem of session and cookie destruction after closing the browser

2. What Is it a cookie? What are cookies used for?

The above is the detailed content of Detailed explanation of Js cookie operation (setting, reading, deleting) examples. For more information, please follow other related articles on the PHP Chinese website!