首先,创建一个js文件
//创建cookie
function setCookie(key, value, expires) {
document.cookie = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';expires=' + ddate(expires);
}
function ddate(expires) {
var ddate = new Date()
ddate.setDate(ddate.getDate() + expires)
return ddate
}
//读取cookie
function getCookie(name) {
var arrStr = document.cookie.split('; ');
//alert(arrStr)
for (var i = 0; i < arrStr.length; i++) {
var arr = arrStr[i].split('=')
//alert(arr[0]+'\n'+arr[1])
if (arr[0] == name) { return decodeURIComponent(arr[1]) }
}
return ''
}
//删除cookie
function removeCookie(name) {
setCookie(name, '', -1)
}
再然后在你需要的地方引入即可,
附上两个应用实例
1.如果用户第一次打开这个网页,那就弹出一个弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="cookie.js"></script>
</head>
<body>
<h1>欢迎访问我们网站</h1>
<script>
function loadPage() {
if (getCookie('user') == '') {
window.open('表单的生成.html','','height=300,width=200,top=100,left=100')
setCookie('user','表单的生成.html',7)
}
}
loadPage()
</script>
</body>
</html>
2.记住用户名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="cookie.js"></script>
</head>
<body>
<form action="#">
<p> 用户名:<input type="text" id="username"></p>
<label for=""><input type="checkbox" id="checkbox">记住用户名</label>
<p> 密 码:<input type="password"></p>
<input type="submit" value="登录" id="password" onclick="submit1()">
</form>
<script>
var user = document.getElementById('username')
var checkbox = document.getElementById('checkbox').checked
function submit1() {
if (checkbox) {
setCookie('user1', user.value, 7)
} else {
removeCookie('user1')
}
}
user.value = getCookie('user1')
</script>
</body>
</html>