什么是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>

第十七节 Cookie基础与应用的更多相关文章

  1. 第三百二十七节,web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    第三百二十七节,web爬虫讲解2—urllib库爬虫 利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode(& ...

  2. 第4章 基础知识进阶 第4.1节 Python基础概念之迭代、可迭代对象、迭代器

    第四章 基础知识进阶第十七节 迭代.可迭代对象.迭代器 一.    引言 本来计划讲完元组和字典后就讲列表解析和字典解析,但要理解列表解析和字典解析,就需要掌握Python的高级的类型迭代器,因此本节 ...

  3. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  4. 第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置

    第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置 主题设置是在xadmin\plugins\themes.py这个文件 默认xadmin是通过下面这 ...

  5. 第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示

    第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件, ...

  6. 第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成

    第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成 apps目录建立 我们创建一个apps目录,将所有的app放到apps目录里去,这样方便管理,也 ...

  7. 第三百六十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)scrapy写入数据到elasticsearch中

    第三百六十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)scrapy写入数据到elasticsearch中 前面我们讲到的elasticsearch( ...

  8. 第三百五十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码

    第三百五十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码 scrapy-redis是一个可以scrapy结合redis搭建分布式爬虫的开 ...

  9. 第三百四十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过downloadmiddleware中间件全局随机更换user-agent浏览器用户代理

    第三百四十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过downloadmiddleware随机更换user-agent浏览器用户代理 downloadmiddleware介绍中间件是 ...

随机推荐

  1. CSS预编译语言-LESS

    LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码 ...

  2. WIN10远程计算机不支持所需的FIPS安全级别解决

    win10系统的电脑在远程xp系统或者其他系统的电脑时,提示错误,远程计算机可能不支持所需的FIPS安全级别,如果出现一以下2种错误,可以解决!   1 第一步:打开win10下的,控制面板 2 第二 ...

  3. 1python简介

    02 python和03 python的区别: python:优美,清晰,简单. python2x:    源码重复,混乱,冗余.    源码不规范.     python3x: 源码整合,优美,清晰 ...

  4. c#重命名文件,报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”

    修改远程服务器的文件名,报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”,“System.NotSupportedExcept ...

  5. Go并发示例-Pool

    https://mp.weixin.qq.com/s/MBY6l5VxrFPJ4AA8nGeQUQ <Go语言实战>笔记(十六) | Go并发示例-Pool 飞雪无情 异步图书 2017- ...

  6. vue跳转到外部链接

    <span @click="see('http://xxxx">点击跳转到xxx</span> 方法:(调用函数) See (e) { window.loc ...

  7. python学习笔记5-字典

    # 字典(哈希映射.关联数组) d0 = {'a': 2, [0,1]:[1,2,3]} # TypeError: unhashable type: 'list' # 值可以是任意数据类型,但键不能是 ...

  8. CentOS7、REHL7的firewalld防火墙使用简单说明

    title: CentOS7.REHL7的firewalld防火墙使用简单说明 categories: Linux tags: - Linux timezone: Asia/Shanghai date ...

  9. selenium 对浏览器标签页进行关闭和切换

    关闭标签页 # 1.关闭浏览器全部标签页 driver.quit() # 2.关闭当前标签页(从标签页A打开新的标签页B,关闭标签页A) driver.close() 切换标签页 from selen ...

  10. MySQL中实现连续日期内数据统计,缺省天数0补全

    某一日,需要查询订单表中一个月每天的金额数 查询出数据如下: array(14) { [0] => array(2) { ["money"] => string(7) ...