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中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新 ...
随机推荐
- sql使用!=查询时会忽略null数据
table_a有3条数据 column1值分别为1,0,null 那么 select * from table_a where column1!='1' 只会查到clumn1为0的数据,null的数据 ...
- 关于SaaS的图
- 04jsp（2）
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- pytorch MNIST加载已下载的数据集出现问题及解决方法
import torch import torch.nn as nn from torch.autograd import Variable import torchvision import tor ...
- Vue 的生命周期 详细解析(使用场景等)
Vue生命周期图: 一.生命周期图的解读 new Vue():首先需要创建一个 Vue的实例对象 Init Events & Lifecycle :初始化:生命周期.事件(如:v-once), ...
- winform 登录后跳转百度地图报错 使用委托解决
最近用winform做一个登录后跳转到百度地图的小程序,使用了线程,winform的UI是单线程操作的,由于百度地图写在另外一个窗体,导致报错.后来使用了委托解决了这个小问题. delegate vo ...
- Dilated Neighborhood Attention Transformer概述
0.前言 相关资料: arxiv github 论文解读 论文基本信息: 发表时间:arxiv2022(2022.9.29) 1.针对的问题 之前的方法通过局部注意力机制来降低计算复杂度,但这削弱了自 ...
- Nginx 配置https的单向或双向认证
一.自制https认证证书 1. 制作CA证书 A. 生成CA私钥:openssl genrsa -des3 -out ca.key 2048,注意要输入两次密码,若去除密码使用openssl rsa ...
- CSS中z-index的属性与使用
z-index 属性指定一个元素的堆叠顺序. 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. Z-index 仅能在定位元素上奏效,z-index 进行定位元素(position:abso ...
- linux虚拟机，ifconfig无法获取静态ip地址
之前一直显示这种ip地址,如下图(网图),查看了DHCP,是正常启动的,虚拟网络编辑器中设置的也正确.后来发现更改虚拟机的设置后就可以了,如下: 设置方法:VMware-虚拟机-设置-网络适配器,选择 ...