cookie
前言
cookie其实就是一些数据信息,类型为“小型文本文件”,其保存在浏览器中。一般由服务器生成可设置失效时间,如果再浏览器生成则默认关闭浏览器后失效,其存放数据的大小为每个cookie大约4k,对于在每个域的储存数目谷歌浏览器没限制,其他浏览器另说
cookie的作用域
前言:domain和path标识定义了cookie的作用域,即cookie应该发送给那些url
- domain:标识指定了那些主机可以接收该cookie,若不指定,默认为当前文档的主机(不包含子域名);若指定了domain,则一般包含子域名(如:若设置了domain=520it.com,则cookie也包含在子域名中——bbs.520it.com)
- path:标识指定了主机下的那些路径可以接收该cookie,子路径也会被匹配(如:设置path=/docs,则/docs/one/也会被匹配)
cookie过程
理解:浏览器发起http请求,服务器会进行cookie设置也就是setcookie。cookie里有名和值两种属性,服务器会把名和值里的内容给填充完整然后将其发给浏览器,之后浏览器会保存起来,这样浏览器以后发送的每一个请求都会自动附上这个cookie
注意
- cookie是有有效期的,cookie到期后浏览器会自动删除该cookie
- cookie里面有名与值两种属性,同时cookie也是一种数据载体
- cookie是绑定在特定域名上的,当设置了一个cookie之后再给创建它的域名发送一个请求时还会包含该cookie,并且包含在http请求头中
- 不同浏览器之间cookie不共用
- 要在服务器环境下才可以设置cookie
- 我们打开浏览器是可以看见保存了那些cookie,因此把用户名和密码放在cookie里不安全(电脑被黑的情况下;因此需要后面的session,用sessionid来代替用户名密码)
使用
//前端设置cookie——在对应域名下的控制台使用
document.cookie="name=阿飞;"//不设置时间默认关闭浏览器后失效
//expires设置有效期,值是一个日期对象(国际标准时间)
var date=new date().gettime()//当前时间转换成毫秒数
var newdate=new date(date 30*24*60*60*1000)//设置过期时间为一个月
document.cookie="name=阿飞;expres=" newdate.toutcstring()
//获取cookie
var cookie=document.cookie
//所有的cookie都存在上面的cookie这一个属性里面,以字符串的形式
console.log(cookie);
//cookie集合格式:name1=value1;name2=value2;name3=value3——注意整体是个字符串
//注意:cookie并不提供修改和删除操作
//修改只需要重建一个重名的cookie来覆盖原来的cookie
//删除直接把重名的cookie过期时间改为过去
前言
session是一个存储在服务器上类似于一个散列表格的文件,里面存有我们需要的信息,在我们需要的时候可以从里面取出来,类似于一个大号的map吧里面的键存储的是用户的sessionid,用户向服务器发起请求时会带上这个sessionid,这时就可以从对应的服务器中取出对应的值
会话的开始:浏览器访问服务器
会话的结束:不同网站对每个用户的会话都设置了失效时间以及唯一的id(sessionid)
session过程
理解:session相当于在服务端开了一个房,没有钥匙是找不到这个房间的,因此在前端设置一个cookie,这个cookie里面存一个sessionid,这个sessionid是唯一打开这个这个房间的钥匙,每次请求时带着这把钥匙,这样便可以在服务器中找到自己的登录状态
为什么禁用cookie就得不到session
因为session是用sessionid来确定当前对话所对应的服务session,而sessionid是通过cookie传递的,禁用cookie相当于失去sessionid也就得不到session
注意
- 因为session是服务器自己定义的东西,所以一般保存在数据库里面
- sessionid通常为一串没有规律的字符串
- 服务器在发送sessioncookie之前会对这个含有sessionid的cookie进行签名(标志他和其他cookie不一样,他是sessioncookie)
session存储
- 存储在服务器上,多台服务器需要session复制
- 存储在数据库中,多台服务器从数据库中取数据
使用
初始化npm:npm init
安装express模块:npm i express
安装express-session模块:npm i express-session
安装connect-mongo模块:npm i connect-mongo
引入express模板:var express=require("express")
引入session模块:var session=require("express-session")
引入connect-mongo模块:var mongostore=require("connect-mongo")
var session=require("express-session")
var express=require("express")
var mongostore=require("connect-mongo")
var app=express()
//注册session中间件
app.use(session({
name:"cjc",
secret:"dw1234dwps",
cookie:{
maxage:1000*60*60,//过期时间,一小时后过期
secure:false//为true时表示只有https协议才能访问cookie
},
resave:true,//设置为true表示重新设置session后,过期时间便会重新开始计算
saveuninitialized:true,
//该属性为true时就是一开始就会给你一个cookie但是这个cookie是无效的,除非你登陆成功之后操作一下session,cookie才会有效
//若为false则就是起初不给cookie除非你登陆成功了,操纵session才会给cookie
store:mongostore.create({
mongurl:"mongodb://127.0.0.1/cjc_session",
ttl:1000*60*10//过期时间
})
//将session存储到数据库中,我们设置session时会通过mongostore这个模块把我们存的session值都放在数据库里
}))
//设置中间件,session过期校验
app.use((req,res,next)=>{
if(req.url.includes("/")){
next()
return
}
if(req.session.user){
//重设session以保证过期时间重新计算
req.session.user=true//user就是一个变量
next()
}else{
//是接口就返回错误码,不是接口就重定向
}
})
app.get("/",(req,res)=>{
console.log("进来了");
//登陆成功时设置session
//这个session是一个对象,下面相当于在session里挂一个user字段
req.session.user="我的数据"
//判断有没有钥匙
if(req.session.user){
//退出登录,销毁session
req.session.destroy(()=>{
send("destory success")
})
}else{
res.send("没有我的数据")
}
})
app.listen(3000,()=>{
console.log("server start");
})
前言
jwt的本质就是一个字符串,其存储在浏览器中,它是将用户信息保存到一个json字符串中,然后进行编码后得到一个jwt
,并且这个jwt带有签名信息,接收后可以校验是否被篡改,所以可以用于在各方之间安全地将信息作为json对象传输。
jwt过程
jwt组成部分(三部分,中间用.分割)
eg:header.payload.signature
- header:声明用什么算法生成签名
- payload:一些特定的数据,比如有效期等
- signature:签名信息(服务器保存的部分)
注意
- jwt三部分紧密相连不可分割,若修改一个部分,则整个部分都会报错
- signature由header和payload经由base64编码再经过header的算法将两个部分进行运算最终得到签名信息(保证令牌的唯一性)
- token只能等到过期才会失效,无法在服务端注销
- token一般都存在localstorage中,也有过期时间字段
使用
npm初始化:npm init
安装jwt模块:npm i jsonwebtoken
引入jwt模块:var jwt=require("jsonwebtoken")
var jwt=require("jsonwebtoken")
//jwt生成token
var token=jwt.sign({
data:'数据内容'
},'密钥部分',{expiresin:'10s'})
console.log(token);
//校验token
var decode=jwt.verify(token,'密钥部分')
console.log(decode);
//检验jwt过期
settimeout(() => {
var decode=jwt.verify(token,'密钥部分')
console.log(decode);
}, 11000);
storage分为localstorage和sessionstorage
localstorage和sessionstorage异同点
localstorage与sessionstorage共同点
- 一般每个存放数据的大小为5mb
- 两者均仅在客户端中保存,不参与和服务器之间的通信
localstorage与sessionstorage不同点
- localstorage的数据生命周期为永久储存,除非你清除
- sessionstorage的数据生命周期仅在当前会话有效,关闭页面或浏览器后被清除
注意:sessionstorage与localstorage存储用key:value数据结构,value值只能是字符串,无法储存对象,若要储存对象则要将其转化为字符串
使用
对于他们两者的操作基本相同,这里以sessionstorage为例
存值:window.sessionstorage.setitem(key,value)
取值:let value=sessionstorage.getitem(key)
清空数据:sessionstorage.removeitem(key)
清空所有数据:sessionstorage.clear()