本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天学习一下cookie的使用，与大家分享
什么是cookie呢?
简单的说就是一个记忆信息的功能
最常见的是各种登录信息的保存
cookie如何实现和使用呢?
我这里主要从三个方面来说：设置、获取和删除
- 设置cookie
这里的设置主要是指cookie的存储时长，那么我们可以封装一个函数
function setCookkie(name, value, isDay) {
var is_date = new Date();
is_date.setDate(is_date.getDate() + isDay);
document.cookie = name + '=' + value + ';expires = ' + is_date;
// expires：失效
// 后面加上时间就可以通过传递参数去定义时长
}
- 获取cookie
cookie的形式是“ name=value; password=value”
function get_cookie(name) {
var arr1 = document.cookie.split('; ');
// 这个已经变成了一个数组
for (var i = 0; i < arr.length; i++) {
var arr2 = arr1[i].split('=');
// 这里就是name与value的分离
if (arr2[0] == name) {
return arr2[1];
}
// 判断是否存在
}
return '';
// 不存在返回一个空值
}
- 删除cookie
cookie的删除很简单，传入想删除的的cookie，调用set_cookie()函数即可
function removeCookie(name) {
set_cookie(name, 1, -1);
}
这里set_cookie()函数最后一个参数为负
意思就是在保存这天的前一天过期,这样就实现了清除的功能
下面我们看一个简单的实战案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记住</title>
</head>
<body>
<form id="form1" action="">
<--这里自行添加跳转的网页-->
用户名：<input type="text" name="user"><br>
密码：<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
<script>
// 设置cookie
function set_cookie(name, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + ';expires = ' + oDate;
}
// 获取cookie
function get_cookie(name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
if (arr2[0] == name) {
return arr2[1];
}
}
return '';
}
// 删除cookie
function removeCookie(name) {
set_cookie(name, 1, -1);
}
// 在网页上进行操作，注意这里的window.onload
/*
* 如果是在谷歌上进行操作后，直接去其他游览器上是不会有cookie的保留的
*/
window.onload = function () {
var oForm = document.getElementById('form1');
var oCheck = document.getElementById('is_check');
var oName = document.getElementsByName('user')[0];
var oPass = document.getElementsByName('password')[0];
oForm.onsubmit = function () {
set_cookie('user', oName.value, 14);
set_cookie('password', oPass.value, 14);
}
oName.value = get_cookie('user');
oPass.value = get_cookie('password');
}
</script>
</body>
</html>
