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中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新 ...
随机推荐
- 浅谈JS中的element.style和window.getComputedStyle()的区别
MDN对于element.style的解释 被高光的句子中的inline style属性是指css内联样式,即元素的style属性的属性值 总结一下,element.style只能获取到元素的styl ...
- 操作系统 Concurrency 并发
1. 线程和进程的区别 名称 执行点 地址空间 状态保存位置 进程 process 一个进程有多个线程,多个执行点 一个进程一个地址空间 Process Control Block 进程控制块 线程 ...
- EasyExcel工具使用
pom文件: <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel< ...
- 我和Java这些年的故事(六)
从2006年开始,我就在建设自己的网站,从2008年到2011年,我托管了四年自己的服务器,那时阿里云还没有兴起,只能自己买服务器,放到托管商机房里去,他们给你一个IP.机器全部是自己运维. IBM内 ...
- python setup.py install 安装、删除。
# python install 安装.卸载 python setup.py install --record files.txt cat files.txt | xargs rm -rf
- keypress和keydown的区别
keypress不识别功能键,比如ctrl,alt,shift,上下左右.keypress返回的ascII码区分大小写.输入小写a返回97,输入大写A返回65. keydown识别.keydown返回 ...
- Promise的几个方法解析
Promise.all 此方法在集合多个 promise 的返回结果时很有用. 输入的promise中只要有一个reject,即进入reject,否则会进入then 完成(Fulfillment):在 ...
- Linux 网卡（遇见问题的解决）
主配置文件 /etc/sysconfig/network-scripts/ifcfg-eth1 里面的详细内容 DEVICE=eth1 网卡名称 TYPE=Ethernet 类型,Ethernet|B ...
- 运筹学之线性规划 1.X
线性规划 线性规划问题的标准形式可以写成: \[\begin{aligned} &max~z=\pmb{c}^T\pmb{X} \\ &s.t.\{ \begin{aligned} & ...
- react module.scss文件中弹窗中 keyframes动画不生效，
以下修改,亲测有效非弹窗内动画写法 .submit_btn{ animation: submit_btn 1.5s infinite; -webkit-animation: submit_ ...