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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 小程序使用分包的示例代码

    小程序使用分包的示例代码

    这篇文章主要介绍了小程序使用分包的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • js实现三级联动效果(简单易懂)

    js实现三级联动效果(简单易懂)

    本文主要介绍了js实现三级联动效果的示例代码,简单易懂。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS获取短信验证码倒计时的实现代码

    JS获取短信验证码倒计时的实现代码

    这篇文章主要介绍了JS获取短信验证码倒计时的实现代码,需要的朋友可以参考下
    2017-05-05
  • 微信小程序实现触底加载

    微信小程序实现触底加载

    这篇文章主要为大家详细介绍了微信小程序实现触底加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • AJAX 仿EXCEL表格功能

    AJAX 仿EXCEL表格功能

    仿Excel表格演示代码,非常不错。
    2009-06-06
  • Javascript+CSS实现影像卷帘效果思路及代码

    Javascript+CSS实现影像卷帘效果思路及代码

    Arcmap里面的一个卷帘效果肯定记忆很深刻,我也对这种比较炫的卷帘效果做了一下研究,现在给大家汇报下结果
    2014-10-10
  • 基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

    基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

    但是由于浏览器的兼容性问题,之前用的很多代码都失去效果,下面就给出一段能够兼容各个浏览器的代码,也不能够算是兼容,只能说在不支持的浏览器中能够给出提示,对js兼容各个浏览器设为首页加入收藏相关知识感兴趣的朋友可以参考下本文
    2016-01-01
  • ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    这篇文章主要介绍了ElementUI的Dialog弹窗实现拖拽移动功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:用法示例

    前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:用法示例

    这篇文章主要给大家介绍了关于前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:的相关资料, 在日常编写中,我们会频繁使用以下几个符号,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • threejs全景图和锚点编辑的实现方案

    threejs全景图和锚点编辑的实现方案

    大家都知道可以利用Threejs中的立方体或者球体实现全景图功能,下面这篇文章主要给大家介绍了关于threejs全景图和锚点编辑的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论