Home > Web Front-end > JS Tutorial > Detailed explanation of JavaScript cookie technology

Detailed explanation of JavaScript cookie technology

高洛峰
Release: 2016-12-06 15:01:30
Original
1253 people have browsed it

Use JS to set cookies, read cookies, and delete cookies
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.

And cookies run on the client, so you can use JS to set cookies.

Suppose there is such a situation, in a certain use case process, jump from page A to page B, if JS is used in page A The variable temp is used to save the value of a certain variable. When you are on page B, you also need to use JS to reference the variable value of temp. The life cycle of global variables or static variables in JS is limited. When a page jump occurs or When the page is closed, the values ​​of these variables will be reloaded, that is, the saved effect will not be 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 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 get 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();
}
 
//读取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;
  }
}
Copy after login

//这是有设定过期时间的使用示例:
//s20是代表20秒
//h是指小时,如12小时则是:h12
//d是天数,30天则:d30
 
setCookie(“name”,”hayden”,”s20”);
Copy after login


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template