正文
第十七节 Cookie基础与应用
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
什么是cookie:其实就是页面用来保存信息:比如,自动登录、记住用户名
cookie的特性:(以域名为单位的)
同一个网站(同一个域名)中所有页面共享一套cookie
数量、大小有限,跟浏览器有关,数量一般不超过50条,大小一般在4K-10K不等
有过期时间,什么时候过期,这个时间是由程序员设定的,如有些登录窗口会有“复选框:两周内自定登录”
JS中使用cookie,其实cookie只是document下面的一个属性,即document.cookie,如下cookie的使用
其中在“火狐”浏览器下,我们可在登录页面“右击空白”——查看页面信息——查看cookie——
设置cookie
① 格式:名字=值
② 设置多个cookie不会被覆盖,但是当我们设置的cookie名字相同时,后者的内容会把前面设置的内容覆盖掉
③ 过期时间:expires=时间,不设置时间时,浏览器关闭后,cookie就没了,其中expires表示有效期限,失效日期
日期对象的使用
<script>
//日期对象的使用
var oDate = new Date(); // oDate.setDate(29); //设置“日”,因为现在为2019年2月,只有28天,所以返回“2019-3-1”
//我们可以用上述方法给cookie添加过期时间,加入我们想让它两周以后过期则如下:
oDate.setDate(oDate.getDate()+14);
// alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+(oDate.getDate()));
document.cookie = 'user=haha; expires='+oDate; //其中 expires='+oDate 这部分内容并不会出现在弹出的窗口里 // document.cookie = 'user=haha'; //此时“=”不表示赋值,而表示添加
// document.cookie = 'password=123456'; //所以本句内容并不会把上面一句覆盖掉
alert(document.cookie);
</script>
把cookie封装成函数,方便之后使用:
//把cookie封装成函数
function setCookie(name, value, iDay) {
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
setCookie('username', 'hahha', 365);
读取cookie:字符串分割
function getCookie(name) {
var arr = document.cookie.split('; '); //cookie的字段之间用“; ”分割开 for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); if (arr2[0] == name) {
return arr2[1];
}
}
return '';
}
alert(getCookie('username')); //返回hahha,匹配成功,正确输出
删除cookie:已经过期的cookie自动删除
//删除cookie
function removeCookie(name) {
setCookie(name, 1, -1);
}
removeCookie('user');
应用实例:
用cookie记录上次登录的用户名
提交时——记录用户名
window.onload——读取用户名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记住上一次登录的用户名</title>
<script>
//用户登录时,把用户名存进cookie,页面onload加载时读取“用户名”
window.onload = function () {
var oForm = document.getElementById('form_1');
var oUser = document.getElementsByName('user')[0]; //用户登录时,把用户名存进cookie
oForm.onsubmit = function () {
setCookie('user', oUser.value, 14); //14天后过期
}; //页面onload加载时读取“用户名”
oUser.value = getCookie('user');
}; //把cookie封装成函数
function setCookie(name, value, iDay) {
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
// setCookie('username', 'hahha', 365);
// alert(document.cookie); //读取cookie
function getCookie(name) {
var arr = document.cookie.split('; '); //cookie的字段之间用“; ”分割开 for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); if (arr2[0] == name) {
return arr2[1];
}
}
return '';
}
// alert(getCookie('username')); //删除cookie
function removeCookie(name) {
setCookie(name, 1, -1);
}
</script>
</head>
<body>
<form id="form_1" action="http://www.baidu.com/">
用户名:<input type="text" name="user"/><br/>
密码:<input type="password" name="pass"/><br/>
<input type="submit" value="登录"/>
</form>
</body>
</html>