JavaScript cookie与session的使用及区别深入探究

 更新时间:2022年10月14日 09:10:40   作者:爱思考的猪  
这篇文章主要介绍了Java中Cookie和Session详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下

1. cookie

1.1 什么是cookie

cookie是解决http无状态的一种方案。

服务端与服务端经过三次握手后建立连接,数据发送完后连接关闭,在之后的请求中服务端无法判断每次的请求是不是由同一个用户发出的。当后面的请求依赖之前的请求数据的时候,客户端每次请求数据的时候必须先将之前的数据保存下来然后放在后面请求体中。而cookie正是解决这个问题的方案,服务端在响应客户端请求的时候将cookie放在请求头中一起传递到客户端,在之后的请求中客户端都会带上这个cookie,服务端验证cookie做出响应。

1.2 KOA中使用cookie

router.get('/getCurrentUserInfo',async ctx=>{
 ctx.cookies.set('userInfo',999);
 ctx.body =  'success';
});

可以看到响应头里面包含set-cookie的字段

如果要设置中文的值需要处理下格式

  const str = new Buffer('hello cookie!').toString();
  ctx.cookies.set('userInfo',str);

ctx.cookies.set(name,value,conifg)还接受第三个参数config,用来配置cookie的作用范围和作用时间

ctx.cookies.set(u_id,111111,{
expires: new Date(),
maxAge: 1000 * 3600 * 4,
domain: '/',
path: '/',
httpOnly: false,
secure: false,
overWrite: false,
})

1.3 expires和maxAge

expires和maxAge都用来设置cookie的有效时间,expires是指定一个日期与客户端本地的时间进行比较,maxAge类似倒计时,cookie在设置后的若干毫秒内有效。本地的时间是可以被修改的,而同一台服务器的时间总是相同的,因此maxAge比expires更加稳定可靠。

// 使用expires
const expiresDate = new Date(Date.now() + 1000 * 3600 * 2);  // 2小时候后过期
ctx.cookie.set('u_id':11111,{
expires: expiresDate
});
// 使用maxAge
ctx.cookie.set('u_id':11111,{
expires: new Date(1000 * 3600 * 2);
});

1.4 浏览器端设置和删除cookie

在浏览器中直接通过document.cookie设置cookie的时候也可以配置domain、path、secure等属性但是无法设置httpOnly。

//设置cookie
const expiresDate = new Date(Date.now() + 1000 * 3600 * 4); // 4小时候过期
document.cookie = `userName=张三;path='/';expires=${expiresDate.toGMTString()}`;
//删除cookie
const expiresDate = new Date(); 
document.cookie = `userName=张三;path='/';expires=${expiresDate.toGMTString()}`;

要注意使用的是GMT字符串格式的时间

2. session

2.1 什么是session

session的工作原理和cookie非常类似,在cookie中存放一个sessionID,真实的数据存放在服务器端,客户端每次发送请求的时候带上sessionID,服务端根据sessionID进行数据的响应。

2.2 koa中使用session

安装和挂载

yarn add koa-session --save;

session的设置和获取

const kao = require('koa');
const session  = require('koa-session');
const app = new Koa();
const CONFIG = {
  key: 'koa.sess', /** (string) cookie key (default is koa.sess) */
  /** (number || 'session') maxAge in ms (default is 1 days) */
  /** 'session' will result in a cookie that expires when session/browser is closed */
  /** Warning: If a session cookie is stolen, this cookie will never expire */
  maxAge: 1000 * 3600 * 4,
  autoCommit: true, /** (boolean) automatically commit headers (default true) */
  overwrite: true, /** (boolean) can overwrite or not (default true) */
  httpOnly: true, /** (boolean) httpOnly or not (default true) */
  signed: true, /** (boolean) signed or not (default true) */
  rolling: false, /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false) */
  renew: false, /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/
  secure: false, /** (boolean) secure cookie*/
  sameSite: null, /** (string) session cookie sameSite options (default null, don't set it) */
};
app.use(session(CONFIG, app));
// or if you prefer all default config, just use => app.use(session(app));
app.listen(3000,()=>{});

3. cookie和session的区别

  • cookie存储在客户端,session存储在服务端,session比cookie更安全
  • cookie的存储数据的格式只能是字符串,且最多只能存储4kb左右的数据,session能存储大量的数据且支持多样的数据格式如json
  • session 由于存储在服务端,当session多的时候会对服务器产生压力,影响服务器性能。

4. cookie和session的使用场景

  • 对于简单而且不敏感的数据通常使用cookie保存,如购物车信息、用户在站点的行为记录等
  • 对于复杂且敏感的数据使用session保存,如用户的账号信息等

到此这篇关于JavaScript cookie与session的使用及区别深入探究的文章就介绍到这了,更多相关JS cookie与session内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现div弹出层的方法

    js实现div弹出层的方法

    这篇文章主要介绍了js实现div弹出层的方法,以实例的形式完整的实现了js弹出div层的效果,并且弹出层可拖拽、可关闭,用户还可根据个人喜好自定义弹出层的显示效果,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • JS中如何将base64转换成file

    JS中如何将base64转换成file

    这篇文章主要介绍了JS中如何将base64转换成file的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    在新浪微博首页看到每条微博后边显示的时间并不是标准的年-月-日格式,而是经过换算的时间差,如:发表于5分钟前、发表于“2小时前”,比起标准的时间显示格式,貌似更加直观和人性化
    2014-04-04
  • 详解Bootstrap四种图片样式

    详解Bootstrap四种图片样式

    本文给大家介绍Bootstrap 对图片的支持,Bootstrap提供了四个可对图片应用简单样式的class,对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript 异步调用框架 (Part 3 - 代码实现)

    JavaScript 异步调用框架 (Part 3 - 代码实现)

    在上一篇文章里,我们说到了要实现一个Async.Operation类,通过addCallback方法传递回调函数,并且通过yield方法返回回调结果。现在我们就来实现这个类吧。
    2009-08-08
  • Bootstrap的fileinput插件实现多文件上传的方法

    Bootstrap的fileinput插件实现多文件上传的方法

    这篇文章主要介绍了Bootstrap的fileinput插件实现多文件上传的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 用js统计用户下载网页所需时间的脚本

    用js统计用户下载网页所需时间的脚本

    下面的方法是个不错的思路,建议对于js感兴趣的朋友,推荐看
    2008-10-10
  • 获取dom元素那些讨厌的位置封装代码

    获取dom元素那些讨厌的位置封装代码

    你还在为offset,scroll,inner,client,screen,mouse发愁吗? 头都大了。而且各个浏览器方法还不太一样。所以往往很浪费我们的时间。 于是我产生了写一个方法用户 专门获取这样的数据。
    2010-06-06
  • JS判断对象是否存在的10种方法总结

    JS判断对象是否存在的10种方法总结

    本篇文章主要是对JS判断对象是否存在的10种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • Nautil 中使用双向数据绑定的实现

    Nautil 中使用双向数据绑定的实现

    这篇文章主要介绍了Nautil 中使用双向数据绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论