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运动动画的八个知识点

    js运动动画的八个知识点

    本文给大家分享的是个人在学习js运动动画的过程中总结的我们需要注意的8个知识点,分别是速度动画、透明度渐变、缓冲运动、多物体运动、获取样式、任意属性值、链式运动和同时运动,非常的详细,推荐给小伙伴们。
    2015-03-03
  • JavaScript常用数组元素搜索或过滤的四种方法详解

    JavaScript常用数组元素搜索或过滤的四种方法详解

    这篇文章主要介绍了JavaScript常用数组元素搜索或过滤的四种方法,每种方式通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 设置BFC功能及使用示例详解

    设置BFC功能及使用示例详解

    这篇文章主要为大家介绍了设置BFC功能及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript实现弹出模态窗体并接受传值的方法

    JavaScript实现弹出模态窗体并接受传值的方法

    这篇文章主要介绍了JavaScript实现弹出模态窗体并接受传值的方法,涉及JavaScript模态窗体的实现及基于URL的传值操作技巧,需要的朋友可以参考下
    2016-02-02
  • js实现点击图片在屏幕中间弹出放大效果

    js实现点击图片在屏幕中间弹出放大效果

    这篇文章主要介绍了js实现点击图片在屏幕中间弹出放大效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript基于自定义函数判断变量类型的实现方法

    JavaScript基于自定义函数判断变量类型的实现方法

    这篇文章主要介绍了JavaScript基于自定义函数判断变量类型的实现方法,结合实例形式分析了javascript判断变量类型的自定义函数定义与使用方法,并针对不同浏览器给出了相关的分析与说明,需要的朋友可以参考下
    2016-11-11
  • webpack的移动端适配方案小结

    webpack的移动端适配方案小结

    移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度。本文主要介绍了webpack的移动端适配方案,感兴趣的可以了解一下
    2021-07-07
  • Javascript计算时间差的函数分享

    Javascript计算时间差的函数分享

    获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒
    2011-07-07
  • 微信小程序使用radio显示单选项功能【附源码下载】

    微信小程序使用radio显示单选项功能【附源码下载】

    这篇文章主要介绍了微信小程序使用radio显示单选项功能,涉及针对radio组件事件响应相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • 微信小程序如何修改本地缓存key中单个数据的详解

    微信小程序如何修改本地缓存key中单个数据的详解

    这篇文章主要介绍了微信小程序如何修改本地缓存key中单个数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论