HTML Cookie
Cookie是什么
HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的属性
有两种方法可以确保 Cookie 被安全发送，并且不会被意外的参与者或脚本访问：Secure 属性和HttpOnly 属性。
Secure: 该cookie只能通过https发送；
HttpOnly: 不允许JS代码(Document.cookie)访问该cookie.
Cookie的作用域
Domain 属性
Domain 指定了哪些主机可以接受 Cookie。如果不指定，默认为 origin，不包含子域名。如果指定了Domain，则一般包含子域名。
例：Domain=mozilla.org 则developer.mozilla.org也可以携带该cookie
Path 属性
Path 标识指定了主机下的哪些路径可以接受 Cookie（该 URL 路径必须存在于请求 URL 中）。以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。
SameSite 属性
SameSite允许服务器要求某个 cookie 在跨站请求时不会被发送。
None。浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写。默认为None.
Strict。浏览器将只在访问相同站点时发送 cookie。
Lax。与 Strict 类似，但用户从外部站点导航至URL时（例如通过链接）除外。
Cookie密码验证小案例
该案例使用Cookie记住用户输入的用户名和密码，为了偷懒我没有写注册页面，登录时使用未有的账号默认注册，使用已有的账号则验证密码。
效果展示
首先来看一下效果：
输入用户名和密码
注册成功，跳转
重新输入相同用户名，不同密码
虽然页面有些简陋，但整体而言，达到了我们的预期效果。
代码
该案例由3个文件组成：cookieTest.html、forCookie.html、cookieFunc.js.
其中cookieTest.html是登录页面；forCookie.html为跳转后页面；cookieFunc.js存放了使用cookie的函数，主要包括添加cookie、查询cookie、删除cookie3个方法。
cookieFunc.js
封装了常用的功能以便日后复用和当前案例减少冗余代码。
//获取cookie
function getCookie(cookieName) {
//获取cookie对象转化为字符串
var decodedCookie = decodeURIComponent(document.cookie);
//如不包含要找的属性名直接结束
if (decodedCookie.indexOf(cookieName) == -1) {
return null;
} else {
//如包含则将其按;分割，遍历直至找到该项，将属性名及=都去掉，返回属性值子串
var cookieList = decodedCookie.split(";");
for (coo of cookieList) {
if (coo.indexOf(cookieName) != -1) {
return coo.trim().substring(cookieName.length + 1);
}
}
}
}
//添加cookie
function setCookie(cookieName, cookieValue, exdays, path) {
//过期时间
var date = new Date();
date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000));
//添加cookie
document.cookie = cookieName + '=' + cookieValue + ';expires=' + date.toUTCString() +
';path=' + path;
}
//清除cookie
function delCookie(cookieName) {
//清除cookie只需将其值设为空，过期时间设为过去即可
setCookie(cookieName, '', -1);
}
cookieTest.html
该文件中的JS代码实现了验证登录的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#login {
width: 300px;
height: 200px;
margin: 0 auto;
margin-top: 100px;
box-shadow: lightgrey 3px 3px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
}
div>* {
margin: 0.5rem;
color: lightslategray;
}
input {
width: 60%;
height: 1.2rem;
border: 1.4px solid lightgrey;
border-radius: 3px;
}
input:focus {
color: black;
}
button {
width: 30%;
height: 30px;
background-color: white;
border: 1.4px solid;
border-radius: 3px;
}
button:hover {
background-color: lightslategray;
color: white;
}
</style>
</head>
<body>
<div id="login">
<div>
<span>账号：</span><input type="text" id="name"> <br>
</div>
<div>
<span>密码：</span><input type="password" id="psd"><br>
</div>
<button onclick="login()">登录</button>
</div>
<script src="./cookieFunc.js"></script>
<script>
function login() {
//获取用户输入
var name = document.querySelector('#name').value.trim();
var psd = document.querySelector('#psd').value.trim();
//如果输入不完整则提示
if (name === '' || psd === '') {
alert("请输入用户名和密码！");
return;
}
//获取cookie中的用户名
var cookieName = getCookie('username');
//如果未注册
if (cookieName == null) {
//注册，将用户名和密码存入cookie
setCookie('username', name, 1, '/basic');
setCookie('userpassword', psd, 1, '/basic');
//注册成功跳转页面
window.location.href = 'http://127.0.0.1:5500/basic/forCookie.html';
} else {
//已注册则获取cookie中的密码
var cookiePsd = getCookie('userpassword');
if (cookieName != name || cookiePsd != psd) {
//如果用户名和密码有一个与cookie不匹配就提示错误
alert("密码错误！");
} else {
//登录成功跳转
window.location.href = 'http://127.0.0.1:5500/basic/forCookie.html';
}
}
}
</script>
</body>
</html>
forCookie.html
没有技术含量，只是模拟登录成功后的跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cookie跳转</title>
</head>
<body>
<a href="cookieTest.html">返回</a>
</body>
<script src="./cookieFunc.js"></script>
<script>
document.writeln("您好，" + getCookie('username') + '！');
</script>
</html>
我一开始使用cookie时无论我如何操作都是空，后来我上网查阅发现有人开启Apache服务后解决了这个问题，于是我想到了我VS Code的插件Live Server，通过它来访问我的html文件（默认5500端口），终于可以正常使用cookie了，如有小伙伴遇到相同问题可借鉴一下。
如有疑问欢迎留言。
最后说一下，一般不使用cookie来存放敏感信息，即使设置了Secure，而且大部分浏览器的cookie数据都会进行加密。因此这个案例只是演示一下cookie的使用，不具备实用性。
进一步了解：Session、Token.
HTML Cookie的更多相关文章
- 超大 Cookie 拒绝服务攻击
有没有想过,如果网站的 Cookie 特别多特别大,会发生什么情况? 不多说,马上来试验一下: for (i = 0; i < 20; i++) document.cookie = i + '= ...
- IE10、IE11 User-Agent 导致的 ASP.Net 网站无法写入Cookie 问题
你是否遇到过当使用一个涉及到Cookie操作的网站或者管理系统时,IE 6.7.8.9下都跑的好好的,唯独到了IE10.11这些高版本浏览器就不行了?好吧,这个问题码农连续2天内遇到了2次.那么,我们 ...
- 解决cookie跨域访问
一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...
- jquery插件的用法之cookie 插件
一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- 一个诡异的COOKIE问题
今天下午,发现本地的测试环境突然跑不动了,thinkphp直接跑到异常页面,按照正常的排错思路,直接看thinkphp的log 有一条 [ error ] [2]setcookie() expects ...
- [转载]Cookie/Session的机制与安全
Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以知道当前是和哪个客户在打交道.本文来详细讨论Cookie和Session的实现机制,以及其中涉及的安全问题. 因 ...
- jquery.cookie的使用
今天想到了要为自己的影像日记增加赞的功能,并且需要用到cookie. 记得原生的js操作cookie也不是很麻烦的,但似乎jquery更简单,不过相比原生js,需要额外引入2个文件,似乎又不是很好,但 ...
- 跨域问题，前端主动向后台发送cookie
跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同 http://www.baidu.com:80 和 https:/ ...
- 【流量劫持】沉默中的狂怒 —— Cookie 大喷发
精简版:http://www.cnblogs.com/index-html/p/mitm-cookie-crack.html 前言 上一篇文章 讲解了如何借助前端技术,打造一个比 SSLStrip 更 ...
- 好好了解一下Cookie
Cookie的诞生 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的.Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新 ...
随机推荐
- ssh远程连接服务器
远程连接服务器及压缩文件与解压 1 终端连接 ssh -p 端口号 用户名@地址 例如:ssh -p 80 name@host 每次远程连接,使用账号和密码登录,有可能使得端口被监听到,从而导致挖矿情 ...
- ABAP 指定字符替换为空格
上代码 DATA:str1 TYPE string VALUE '小红##爱#six##小绿#666'. *******DATA(str1) = '小红##爱#six##小绿#666'. " ...
- R6-1 输入年份和天数，输出对应的年、月、日
R6-1 输入年份和天数,输出对应的年.月.日 分数 15 全屏浏览题目 切换布局 作者 张泳 单位 浙大城市学院 要求定义和调用函数month_day ( year, yeardy, *****pm ...
- 如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度？
如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度? 最开始想到的方法就是 div 宽度取 n%, style 设置 margin:auto. 但是这样有一个问题,一定距离是根据 n 的 ...
- RayLink远程控制软件：叮～你收到一份年度关键词报告
叮~~~ 今天是12月31日,2022年的最后一天.今天过后,明天就是2023年啦!R君提前恭祝大家新年快乐,温情满满的跨年之际,RayLink感恩2022遇见大家,2023还请大家多多关照~ 202 ...
- Operator包的应用
# -*-coding:utf-8-*- import operator print(operator.add(1,1)) # 加 print(operator.sub(2,1)) #减 ...
- Eureka服务端创建及服务注册
一.Eureka服务端创建 1. 引入依赖:pom.xml <!-- eureka 服务端 --> <dependency> <groupId>org.spring ...
- centos7.4离线安装.NETCore3.1 环境
1.在有网的情况下把离线包下载到电脑上sudo yum install --downloadonly --downloaddir=/home/mjb/soft/dotnet-sdk-3.1 dotne ...
- vue的双向绑定规则
vue提供了v-model双向绑定指令,用来辅助在不操作DOM的前提下,快速读取表单的数据 <!DOCTYPE html> <html lang="en"> ...
- Linux一键单机部署和集群部署
整个部署脚本只用执行sh即可,有需要可以联系我. 一.部署类型 可参考:常见的部署类型(停机部署.蓝绿部署.滚动部署.灰度部署.AB测试等) 二.一键单机部署Docker服务 三.一键单机部署原生服务 ...