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中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新 ...
随机推荐
- vue项目，npm run dev的时候出现：Error: error:0308010C:digital envelope routines::unsupported
vue项目,npm run dev的时候出现:Error: error:0308010C:digital envelope routines::unsupported 这个是node的版本问题.我的n ...
- @Service注解
@Service注解的作用之一就是添加在Service层做Bean实例化, 在遇到service层方法有多个实现时也可指定@Service(name=""),并在controlle ...
- layui 关闭/打开新标签
setTimeout(function () { //关闭当前页面并跳转到课程列表 var topLayui = parent === self ? layui : top.layui; parent ...
- C#windows 服务 《转载》
转自:https://blog.csdn.net/Code_May/article/details/123909870 c#应用Windows服务 背景 一.创建windows服务 1.创建windo ...
- vscode个人常用插件
1.个人常用插件记录一下,2020年7月6日
- 用Python把PDF文件转换成Word文档
首先,下载所需要的库 1 :pdfminer 安装库命令: pip install pdfminer3k 2: docx 安装库命令: pip install python_docx 开 ...
- Java方法之命令行传递参数
命令行传参 有时候希望运行一个程序时候再传递给它消息.这要靠传递命令行参数给main()函数实现. public class Demo05 { public static void main(Stri ...
- 老生常谈：String s1 = new String("abc") 创建了几个字符串对象及8 种基本类型的包装类和常量池
将创建 1 或 2 个字符串.如果池中已存在字符串常量"abc",则只会在堆空间创建一个字符串常量"abc".如果池中没有字符串常量"abc" ...
- C++ 单向链表手动实现（课后作业版）
单向链表,并实现增删查改等功能 首先定义节点类,类成员包含当前节点的值和下一个节点的地址 /node definition template <typename T> class Node ...
- Godot的场景树
在Godot中,一个游戏的启动大致流程如下: 简而言之,Godot的main启动一个进程,加载所需的驱动设备(如渲染设备:GL/GLES/Vulkan等).音频设备,输入控制器设备等等:然后进入主循环 ...