Cookie
cookie的简介
1.总体说明
2.简介
3.基本原理
4.各大浏览器支持情况
5.生存期
6.属性介绍
7.前端操作 cookie（vue）
8.服务端操作 cookie（node）
9.运用
10.HTML5本地存储使用
cookie的简介
# 1.总体说明
1）Cookie是1993年由网景公司（Netscape）前雇员发明的一种进行网络会话状态跟踪的技术。
会话是由一组请求与响应组成，是围绕着一件相关事情所进行的请求与响应。所以这些请求与响应之间一定是需要有数据传递的，即是需要进行会话技术的跟踪的。
然而HTTP协议是一种无状态协议，在不同的请求间是无法进行数据传递的。此时就需要一种可以进行请求间数据传递的会话跟踪技术，而cookie就是一种这样的技术。
2）cookie是由服务器生成，保存在客户端的一种信息载体。这个载体中存放着用户访问该站点的会话状态信息。只要cookie没有被清空，或都cookie没有失效，那么，保存在其中的会话状态就有效。
\ cookie 主要是用于管理服务端和客户端直接的状态， 其本质上就是一堆存储在客户端的数据
用户在提交第一次请求后，由服务器生成cookie，并将其封装到响应头中，以响应的形式发送给客户端。客户端接收到这个响应后，将cookie保存到客户端。当客户端再次发送同类请求后，在请求中会携带保存在客户端的cookie数据，发送到服务端，由服务端对会话进行跟踪。
每个cookie的大小一般不能超过4KB，超过这个长度的Cookie，将被忽略，不会被设置。
cookie是由若干键值对构成，这里的键一般称为name，值称为value；cookie中的键值对均为字符串
# 2.简介
1）标准的 http 协议是无状态的，也就是指服务端对于客户端的每次请求都认为它是一个新的请求，上一次会话和下一次会话之间是没有任何联系，这时当用户访问服务端并进行登录后，客户端之后的请求服务端依然无法对客户端身份进行识别， 如果将客户端与服务器之间的多次交互当做一个整体来看，那么服务端若想识别客户端的身份那么就需要将多次交互所涉及的数据（状态）保存下来。
补：标准的http协议指的是不包括cookies, session，application的http协议
2）cookie 的作用就是对请求和响应的状态进行一个管理， 服务端通过在响应体中设置 cookie (状态)， 客户端会将 cookie (状态) 存储起来， 之后客户端的每个请求都将 cookie (状态)带上， 这样服务端就能够对客户端的身份进行识别；
在早期 cookie 还未出现之前有个最简单的办法就是在请求的页面中插入一个 token，然后在下次请求时将这个 token 返回至服务器。这需要在页面的 form 表单中插入一个包含 token 的隐藏域，或者将 token 放在 URL 的 query 字符串中来传递。这两种方法都需要手动操作，而且极易出错，而 cookie 则不同一般情况下客户端会自动存储服务器发来的 cookie, 并在之后的每次请求中自动带上 cookie 而无需客户端进行手动处理。
# 3.基本原理
当浏览器向服务器发送请求的时候，服务器会将少量的数据以 set-cookie 消息头的方式发送给客户端， 浏览器一般会自动将 cookie 数据进行存储，当客户端再次访问服务器时，会将这些数据以 cookie 消息头的方式发送给服务器，服务端就可以根据 cookie 消息头来判别用户的身份或进行一些特别的处理并返回响应。
4.各大浏览器支持情况
IE 6 IE 7.0 8.0 Opera Fire Fox Safari Chrome
cookie 个数 每个域名下20个 每个域名下50个 每个域名30个 每个域名50个 没有限制 每个域名53个
cookie 大小 4095字节 4095字节 4096字节 4097字节 4097字节 4097字节
# 5.生存期
从 cookie 的工作原理上可以知道 cookie 信息主要是存储在客户端的状态， 而 cookie 在客户端的生存期则主要由属性 max-age 决定， max-age 属性以秒为单位表示 cookie 的存活时间为 max-age 秒； cookie 还有一个属性 expires 其作用和 max-age 是一样。
★ 默认情况下 cookie 只是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户关闭浏览器窗口后这些值也会随之销毁（生成的 cookie 临时存储于浏览器内存中）
max-age 为正数: cookie 会在 max-age 秒之后被销毁（会将状态存储于 cookie 文件中并存储于本地硬盘中）
max-age 为负数时: cookie 只在浏览器会话期间存在，当用户关闭浏览器窗口后这些值也会随之销毁（生成的 cookie 临时存储于浏览器内存中）
max-age 为 0 时: cookie 将被立即销毁
# 6.属性介绍
name 名字 一个域名下绑定的cookie，名字不能相同
value 值 1）必须被URL编码2）不允许包含分号、逗号、空格
domain 域名 cookie绑定的域名如果没有设置，就会自动绑定到执行语句的当前域
path 路径 默认： /这个值匹配的是web的路由
expires 有效期 指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个cookieexpires 是 http/1.0 协议中的属性，在新的 http/1.1 协议之后 expires 已经由 max-age 选项代替
max-age 有效期 如果同时指定了 expires 和 max-age，那么 max-age 的值将优先生效
secure 安全 包含 secure 选项的 cookie 只有在当请求是 HTTPS 或者其他安全协议时， 才能被发送至服务器；默认情况下， cookie 不会带 secure 选项(即为空)。所以默认情况下，不管是 HTTPS 协议还是 HTTP 协议的请求，cookie 都会被发送至服务端。
httpOnly 如果这个属性设置为true，就不能通过js脚本来获取cookie的值，能有效的防止xss攻击
someSite sameSite-cookies 是一种机制，用于定义 cookie 如何跨域发送，其目的主要是为了尝试阻止 CSRF （Cross-site request forgery 跨站请求伪造）以及 XSSI （Cross Site Script Inclusion (XSSI) 跨站脚本包含）攻击 值可以是Strict 或者 Lax ，默认是Strict
strict： 当 sameSite 属性值为 strict 时， 将禁止发送所有第三方链接的 cookies， 比如有 cookie ( domain = a.com, sameSite = strict ), 那么在其他网站请求 a.com 时都不会带上该 cookie。
lax： 当 sameSite 属性值为 lax 时， 只会在使用危险 HTTP 方法发送跨域 cookie 的时候进行阻止，例如 POST 方式。比如有 cookie ( domain = a.com, sameSite = lax ), 那么在其他网站通过 POST 方式请求 a.com 时都不会带上该 cookie。
CSRF攻击简述: CSRF 攻击主要是盗用用户信息并发送恶意请求的一种攻击方式， 比如说某用户登录一个完全网站 A， A 站点返回一个能够标识用户身份的 cookie， 当用户无意中访问一个恶意网站 B, B 站点向 A 站点发起恶意请求， 这时请求中将会带上具有用户身份标识的 cookie。
XSSI攻击简述: XSSI 是 XSS 的一种形式， 假设网站 A 有一个脚本用于读取用户的私人账户信息， 攻击者可以在自己的恶意网站包含这个脚本， 当网站 A 的用户访问攻击者的网站时该网站将加载该脚本并带上用户身份标识 （cookie） 该脚本将读取用户的私人账户信息， 这时用户的信息可能就会发生泄露。
# 7.前端操作 cookie（vue）
方式一：
1） 创建一个js文件把设置cookie，获取cookie，删除cookie的方法进行封装
// 设置cookie (增加到vue实例方便全局调用)
set: function (name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
},
// 获取cookie
getCookie: function (name) {
var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
},
// 删除cookie
delCookie: function (name) {
this.set(name, '', -1);
}
2） main.js中引入，挂载到vue原型上:
import common from '../static/js/common'
Vue.prototype.common = common
import cookie from '@/utils/cookie.js'
Vue.prototype.cookie = cookie
3） 组件中引用:
this.common.setCookie("token",'111111111111');//缓存token
console.log('获取cookie',this.common.getCookie("token"));//获取缓存的token
方式二：
使用vue-cookies操作cookie
在vue中如果想要操作cookie，除了使用之前我们自己封装好的操作cookie的方法之外，我们还可以使用vue-cookies插件
1） 安装vue-cookies:
npm install vue-cookies --save
2）引入vue-cookies:
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
3）设置一个cookie:
this.$cookies.set(keyName, value, expireTimes, path, domain, secure) //return this
4）获取一个cookie:
this.$cookies.get(keyName) // return value
5）删除一个cookie:
this.$cookies.remove(keyName, path, domain)
// return false or true , warning： next version return this, use isKey(keyname) return true/false,please
6）检查某个 cookie name是否存在
this.$cookies.isKey(keyName) // return false or true
7） 获取所有 cookie name，以数组形式返回
this.$cookies.keys() // return a array
方式三：
使用js-cookie操作cookie
https://www.npmjs.com/package/js-cookie
1）安装
npm install js-cookie --save
2）使用
Cookies.set('name', 'value', { expires: 7, path: '' });
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Cookies.get(); // => { name: 'value' }
Cookies.remove('name');
# 8.服务端操作 cookie（node）
1）设置cookie
服务端设置 cookie 主要是通过设置响应头 set-cookie 来设置 cookie， 如果需要设置多个 cookie 得多写几个 set-cookie
res.writeHeader("200",{
"Set-Cookie":["isvisit=yes","username=zss"]
})
查看响应头和浏览器控制台
2）获取客户端请求中的cookie
服务器获取 cookie 实际上就是获取请求头 cookie
server.post("/index",(req,res)=>{
//通过req.headers.cookie来获取客户端发送的cookie值
const cookie = req.headers.cookie || "";
//获取到的cookie值实际上是一个字符串，如："isvisit=yes; username=jack"
//因为获取到的cookie是一个字符串，不太好操作判断，建议将这个字符串转换为对象
//可以使用系统模块querystring来进行这个转换
const querystring = require("querystring");
const cookieObj = querystring.parse( cookie , "; " ,"=" );
if( cookieObj.isvisit == "yes"){
}
})
3）设置cookie的有效期
let time = Date.now()+(72460601000)
//以毫秒数来创建Date对象
let utc = new Date(time).toUTCString();
res.writeHeader("200",{
"Set-Cookie":["isvisit=yes; expires="+utc,"username=zss"]
})
# 9.运用
1）会话状态管理：用户登录（十天内免登录）购物车（京东），游戏分数或其他需要记录的信息
2）个性化设置：用户自定义设置、主题
3）浏览器行为跟踪： 跟踪分析用户行为
cookie：做一些小的协议（存储）
# 10.HTML5本地存储使用
https://blog.csdn.net/weixin_42881744/article/details/81414262
本地存储：把数据存储在浏览器中
通过javascript代码来进行数据信息的保存和读取。
本地存储只能保存字符串类型的数据，以键值对的形式来保存数据
1）sessionStorage 只能存储字符串 同一个页面中可以使用 页面存储（当网页关闭之后，数据就没有了）
当全局变量来用 用的比较少 5M
具体用法：
sessionStorage.setItem("键名", 值 );//保存数据
sessionStorage.getItem("键名");//获取键名对应的数据
sessionStorage.removeItem("键名");//移除键名对应的数据
sessionStorage.clear();//删除所有数据
2）localStorage 只能存储字符串 同一个浏览器中可以使用 20M
持久化存储(就算网页关闭了，数据依然存在，下一次可以取出来使用)
json:数据格式 让我们把一个信息用对象的形式存储起来
具体用法：
localStorage.setItem("键名",值);//保存数据
localStorage.getItem("键名");//获取键名对应的数据
localStorage.removeItem("键名");//移除键名对应的数据
localStorage.clear();//删除所有数据
本地存储特性（总结）：
1）数据存储在用户浏览器中
2）设置、读取方便、甚至页面刷新不丢失数据
3）容量较大，sessionStorage约5M、localStorage约20M
4）只能存储字符串，可以将对象JSON.stringify()编码后存储
功能实现：
记录搜索的关键字及获取地址栏中的内容
1.声明一个数组，用来保存用户输入的关键字
var arr = [];
2.在跳转之前将用户输入的关键字保存到数组中
if(arr.indexOf(val) == -1){
arr.push(val);
}
3.将数组保存到localstorage（只能保存字符串）
var str = JSON.stringify(arr);
localStorage.setItem('keyitem',str);
4.读取localStorage的数据
var res = localStorage.getItem('keyitem')||'[]';//需要给一个默认值，不然程序判断的时候会出错
// 不能是空的字符串，要是空的数组
// 转化为数组
// if(res =''){
// arr =[];
// }else{
arr = JSON.parse(res);
// }
console.log(arr);
5.有重复的数据：处理方法：1）去重 2)在存储之前看一下是否有这个数据 数组的方法 indexOf() ==-1 arr.indexOf(val) ==-1
6.动态生成列表数据
清空历史需要清空的内容
1.清空本地存储的数据
localStorage.removeItem('keyitem');
2.清空数组中的数据
arr = [];
3.刷新页面
location.reload();