javascript sets and gets cookie method example details
- 2020-11-18 06:07:47
- OfStack
This article gives an example of how to set up javascript and get cookie. To share for your reference, the details are as follows:
1. Set the cookie
function setCookie(cookieName,cookieValue,cookieExpires,cookiePath)
{
cookieValue = escape(cookieValue);// coding latin-1
if(cookieExpires=="")
{
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth()+6);
cookieExpires = nowDate.toGMTString();
}
if(cookiePath!="")
{
cookiePath = ";Path="+cookiePath;
}
document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath;
}
2. Obtain cookie
function getCookieValue(cookieName)
{
var cookieValue = document.cookie;
var cookieStartAt = cookieValue.indexOf(""+cookieName+"=");
if(cookieStartAt==-1)
{
cookieStartAt = cookieValue.indexOf(cookieName+"=");
}
if(cookieStartAt==-1)
{
cookieValue = null;
}
else
{
cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1;
cookieEndAt = cookieValue.indexOf(";",cookieStartAt);
if(cookieEndAt==-1)
{
cookieEndAt = cookieValue.length;
}
cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));// decoding latin-1
}
return cookieValue;
}
Example:
<!doctype html>
<html>
<head>
<title>cookie</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
// To obtain cookie
function getCookieValue(cookieName)
{
var cookieValue = document.cookie;
var cookieStartAt = cookieValue.indexOf(""+cookieName+"=");
if(cookieStartAt==-1)
{
cookieStartAt = cookieValue.indexOf(cookieName+"=");
}
if(cookieStartAt==-1)
{
cookieValue = null;
}
else
{
cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1;
cookieEndAt = cookieValue.indexOf(";",cookieStartAt);
if(cookieEndAt==-1)
{
cookieEndAt = cookieValue.length;
}
cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));// decoding latin-1
}
return cookieValue;
}
// Set up the cookie
function setCookie(cookieName,cookieValue,cookieExpires,cookiePath)
{
cookieValue = escape(cookieValue);// coding latin-1
if(cookieExpires=="")
{
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth()+6);
cookieExpires = nowDate.toGMTString();
}
if(cookiePath!="")
{
cookiePath = ";Path="+cookiePath;
}
document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath;
}
// Page load time handler
function window_onload()
{
var userNameElem = document.getElementById("userName");// User name input box object
var passwordElem = document.getElementById("password");// Password entry box object
var currUserElem = document.getElementById("currUser");// Check box object
var currUser = getCookieValue("currUser");
if(currUser!=null)
{
userNameElem.value=currUser;
currUserElem.checked = true;
}
if(userNameElem.value!="")
{
passwordElem.focus();// The password field gets focus
}
else
{
currUserElem.focus();// The user name input box gets focus
}
}
// Form submission processing
function login()
{
var userNameElem = document.getElementById("userName");
var passwordElem = document.getElementById("password");
var currUserElem = document.getElementById("currUser");
if(userNameElem.value=="" || passwordElem.value=="")
{
alert(" User name or password cannot be empty! ");
if(userNameElem.value=="")
{
userNameElem.focus();// The user name input box gets focus
}
else
{
passwordElem.focus();// The password field gets focus
}
return false;
}
if(currUserElem.checked)
{
setCookie("currUser",userNameElem.value,"","");// Set up the cookie
}
else
{
var nowDate = new Date();// The current date
nowDate.setMonth(nowDate.getMonth()-2);// will cookie The expiration time is set to a previous date
cookieExpires = nowDate.toGMTString();// The format of the expiration time must be GMT Date format
setCookie("userName","",cookieExpires,"");// delete 1 a cookie Simply set the expiration time to the past 1 Within a few minutes
}
return true;
}
</script>
<style type="text/css">
div{
font-size:12px;
}
</style>
</head>
<body onload="window_onload()">
<div>
<form id="loginForm" onsubmit="return login()">
User name: <input type="text" id="userName"><br>
The secret Code: <input type="password" id="password">
<input type="checkbox" id="currUser"> Remember user name <br>
<input type="submit" value=" The login ">
</form>
</div>
</body>
</html>
Note:
Since the google Chrome browser only supports ES20en-ES21en for security purposes, it is not effective in local testing and needs to be uploaded to the server to try 1.
For more information about JavaScript operation cookie, please refer to JavaScript Operation cookie related knowledge Summary and cookie Operation Skills Summary
I hope this article has been helpful in JavaScript programming.