<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div></div>
<script>
//cookie必须在服务器下访问;必须是http或https下才可以操作cookie;
// 可以用集成环境 wampServer 下载即可; 也可以用火狐浏览器自带服务器;
// 1，设置cookie:
document.cookie = "user=xiaoming";
// 创建两条cookie
document.cookie = "age=20";
// 2，获取cookie:
console.log(document.cookie)
// 输出: user=xiaoming; age=20 注意：cookie 和 cookie之间是有封号+空格链接的, 最后一组不加封号
// 3，过期时间: 不设置的时候;cookie是临时性存储;当关闭浏览器时消失;
// 设置方法:设置五天之后的过期时间:
var date = new Date(); //获取时间
date.setDate(date.getDate() + 5) //设置时间五天以后
// 过期时间也是也是相当于一个cookie 以key:value 形式存在;
document.cookie = "id=san; expires=" + date;
// 4,删除cookie; 就是过期时间设置成过去；
// cookie的作用:
// 一,可以做个性化,个人皮肤等;
// 二,跟踪用户行为,偏好等;
// 三,购物车;
// 四,登录状态;
// 1,点击登录,信息给后台;
// 2,后台将用户名的登录态存在cookie中;
// 3,再次登录将登录态发送给后台;
// 4,后台判断登陆过;就不用再登录了;
// cookie存的都是标识;后台通过标识返回内容;
// 封装cookie
// 调用
setCookie('userName', '大华', 5); //创建
console.log(getCookie("userName")); //获取
delCookie('userName'); //删除
console.log(getCookie("userName")); //获取；删除后获取不到
function setCookie(key, value, times) { //封装创建方法
var date = new Date(); //获取时间
date.setDate(date.getDate() + times); //设置时间
document.cookie = key + '=' + value + '; expires=' + date;
}
function getCookie(key) { //封装获取方法
var cookies = document.cookie.split("; "); //cookie 字符串截成数组
for (var i = 0; i < cookies.length; i++) {
var itemCookies = cookies[i].split('=');
if (itemCookies[0] == key) {
return itemCookies[1];
}
}
}
function delCookie(key) { //封装删除方法
//删除cookie就是把过期时间设置成过去的一个时间就可以了
setCookie(key, '', -1);
}
</script>
</body>
</html>
网友评论