什么是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. python 格式化向sql语句输出元组

    想要往执行的sql语句里传入元组怎么办?尤其像insert 数据等操作,其实 利用"{}".format(tuple)固定格式传值即可 results = ((,,),(,,)) ...

  2. C++ 编译发现 error C2146: syntax error : missing ';' before identifier 'm_ctrlserver'

    解决这个问题的根源是重复包含了头文件

  3. F#周报2019年第9期

    新闻 对于F#,Visual Studio 2019 RC有哪些更新 Visual Studio 2019 RC现在已经发布 C#版本与工具的升级 如何移植桌面应用程序到.NET Core 3.0 对 ...

  4. [dev][socket] unix domain socket删除socket文件

    问题 在使用unix domain socket的时候,bind之后,会在本地路径里 产生一个与path对应的socket文件. 如何正确的在用完socket之后,对其销毁呢? 方案 使用 unlin ...

  5. 快速搭建一个直播Demo

    缘由 最近帮朋友看一个直播网站的源码,发现这份直播源码借助 阿里云 .腾讯云这些大公司提供的SDK 可以非常方便的搭建一个直播网站.下面我们来给大家讲解下如何借助 腾讯云 我们搭建一个简易的 直播示例 ...

  6. Windows命令行设置dns

    管理员运行cmd 1.dns配置成192.168.1.200 netsh interface ip set dns name="以太网" source=static addr=19 ...

  7. linux基础命令--rmdir 删除空目录

    描述 rmdir命令用于删除空目录. 语法 rmdir [OPTION]... DIRECTORY... 选项列表 选项(常用的已加粗) 说明 --ignore-fail-on-non-empty 忽 ...

  8. zabbix监控特定脚本有无生成

    1.由于权限问题,zabbix不能直接查看其它用户目录下的文件,修改sudo文件使zabbix用户能以root身份执行test命令 visudo zabbix ALL=(root) NOPASSWD: ...

  9. MySQL中的EXPLAIN

    使用EXPLAIN加上SELECT语句可以获取优化器的查询执行计划 MySQL会在查询上设置一个标记,当执行查询时,这个标记会返回关于在执行计划中每一步的信息,而不是执行它.它会返回一行或多行信息,一 ...

  10. 对象是存入cookie中需要注意

    直接把对象存入cookie中的话,会转为字符串的 cookie中保存的都是字符串 所以取出来后还需要进行转换,转换成对象 JSON.parse()进行转换