Cookie与Session

最新推荐文章于 2024-09-03 22:06:25 发布
最新推荐文章于 2024-09-03 22:06:25 发布
阅读量461 收藏
点赞数
分类专栏： Node基础 文章标签： cookie session
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124326276
版权
本文详细介绍了Koa框架中Cookie和Session的使用，包括设置、获取Cookie，利用Cookie实现登录计数，以及Session的管理与登录验证过程。通过实例展示了如何在前后端交互中保持用户状态和安全性。
摘要由CSDN通过智能技术生成

一、Cookie与Session简介

cookie是服务器写在客户端的数据。

session是服务器记录在服务器上的数据。

二、设置Cookie

1、server.js：

const Koa = require("koa"); // 引入Koa构造函数
const router = require("koa-router")();
const views = require("koa-views");
const nunjucks = require("nunjucks");
const app = new Koa(); // 创建应用

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// 首页路由
// ctx：上下文对象
router.get("/", async (ctx) => {
    ctx.cookies.set("username", "xiaoming");
    ctx.body = "cookie";
})

app.use(router.routes());

// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

2、打开首页，F12中，网络，查找Cookie：

可以看到username已经存到cookie里面了。

这是响应的Cookie，是服务器给客户端发的。

我们再次刷新，会发现，请求的也有这个username的cookie数据了。

 

 三、获取Cookie

1、新增【/test】路由：

router.get("/test", async (ctx) => {
    let username = ctx.cookies.get("username");
    ctx.body = username;
})

 2、访问【/test】页面：

如上图，已经获取到了Cookie值。

四、利用cookie获取登录次数

1、更改【/test】路由：

router.get("/test", async (ctx) => {
    let count = ctx.cookies.get("count");
    // 如果有存在cookie，则每次访问，cookie值都加1
    if (count > 0) {
        ++count;
        ctx.cookies.set("count", count, {
            // 设置cookie过期时间
            maxAge: 2000,
        })
    } else {
        // 如果没有cookie值，则说明初次访问，设为1
        count = 1;
        ctx.cookies.set("count", count);
    }
    ctx.body = count;
})

2、打开页面，测试

 

 五、设置Session

 1、安装koa-session插件

cnpm install --save koa-session

2、修改server.js：

const Koa = require("koa"); // 引入Koa构造函数
const app = new Koa(); // 创建应用
const router = require("koa-router")();
const views = require("koa-views");
const session = require("koa-session");
// 设置密钥(这边我们手动设置)
app.keys = ["123456"]


// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// 设置session
app.use(session({
    maxAge: 30000
}, app));

// 首页路由
// ctx：上下文对象
router.get("/", async (ctx) => {
    ctx.cookies.set("username", "xiaoming");
    ctx.body = "cookie";
})

router.get("/test", async (ctx) => {
    let count = ctx.cookies.get("count");
    // 如果有存在cookie，则每次访问，cookie值都加1
    if (count > 0) {
        ++count;
        ctx.cookies.set("count", count, {
            // 设置cookie过期时间
            maxAge: 2000,
        })
    } else {
        // 如果没有cookie值，则说明初次访问，设为1
        count = 1;
        ctx.cookies.set("count", count);
    }
    ctx.body = count;
})

// 设置session页面
router.get("setSession", async (ctx) => {
    ctx.session.user = "sessionUser";
    ctx.body = "设置session页面";
})

// 获取session页面
router.get("getSession", async (ctx) => {
    let user = ctx.session.user;
    ctx.body = user;
})

app.use(router.routes());

// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

 关键代码：

const session = require("koa-session");
// 设置密钥(这边我们手动设置)
app.keys = ["123456"]


// 设置session
app.use(session({
    maxAge: 30000
}, app));


// 设置session页面
router.get("setSession", async (ctx) => {
    ctx.session.user = "sessionUser";
    ctx.body = "设置session页面";
})

// 获取session页面
router.get("getSession", async (ctx) => {
    let user = ctx.session.user;
    ctx.body = user;
})

3、访问/setSession：

 

   

响应Cookie，是服务器发给客户端的，加密的Cookie。 

4、访问/getSession：

 

 六、使用Session和Cookie实现登陆验证

1、server.js，logout.html模板页，index.html首页，login.html登录页，list.html列表页

登录页输入用户名，密码，成功后，跳转到列表页。并且存放session。session过期时间3秒。

列表页可以注销，注销后，返回首页，session清除。

2、server.js

const Koa = require("koa"); // 引入Koa构造函数
const app = new Koa(); // 创建应用
const router = require("koa-router")();
const views = require("koa-views");
const parser = require("koa-parser");
const session = require("koa-session");
// 设置密钥(这边我们手动设置)
app.keys = ["123456"]

app.use(parser());

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// 设置session
app.use(session({
    maxAge: 3000
}, app));

// 首页路由
// ctx：上下文对象
router.get("/", async (ctx) => {
    await ctx.render("index.html")
})

// 登录页：任何用户都可以访问
// get请求
router.get("/login", async (ctx) => {
    await ctx.render("login.html")
})

// post请求
router.post("/login", async ctx => {
    let username = ctx.request.body.username;
    let password = ctx.request.body.password;
    if (username === "xiaoming" && password === "123456") {
        ctx.session.user = "xiaoming"
        // 重定向
        ctx.redirect("/list");
    } else {
        ctx.redirect("/");
    }
})

// 内容页
router.get("/list", async (ctx) => {
    // session里面有user,就渲染list页面
    if (ctx.session.user) {
        await ctx.render("list.html");
    } else {
        ctx.redirect("/");
    }
})

// 注销
router.get("/logout", async ctx =>{
    // 清除session中的user值
    ctx.session.user = "";
    // 重定向到首页
    ctx.redirect("/");
})


app.use(router.routes());

// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

3、layout.html（模板页）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout</title>
</head>

<body>
    <div>
        <a href="/">首页</a>
        <a href="/login">登录</a>
        <a href="/list">列表</a>
    </div>
    {% block content %} {% endblock %}
</body>

</html>

4、login.html（登录页）

{% extends "./views/layout.html" %}

{% block content %}

<h1>登录</h1>

<form action="/login" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="登录">

</form>

{% endblock %}

 5、index.html（首页）

{% extends "./views/layout.html" %}

{% block content %}

<h1>首页</h1>

{% endblock %}

6、list.html（列表页）

{% extends "./views/layout.html" %}

{% block content %}

<h1>列表</h1>

<a href="/logout">注销</a>

{% endblock %}

7、效果：

pro1822
关注
专栏目录
PHP的cookie与session原理及用法详解
01-02
本文实例讲述了PHP的cookie与session原理及用法。分享给大家供大家参考，具体如下： 产生背景 HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味...
Django中的cookie与session操作实例代码
10-19
Session与Cookie不同，它主要在服务器端存储用户信息。Django使用一个基于Cookie的session ID来识别特定的会话。在Django中，我们首先需要在settings.py中启用session： ```python SESSION_ENGINE = 'django....
Cookie 和 Session
热门推荐
qq_54219272的博客
04-10 1万+
Cookie 和 Session 文章目录Cookie 和 Session一、session二、Cookie和session的区别三、servlet中对Cookie和Session提供的封装 前言： 这篇帖子重点讲讲Cookie和Session之间的区别，以及作用，Cookie在http协议中就提到了他的定义，作用，小伙伴们可以跳转到 Http协议 这个页面看看Cookie的基本概念及作用。 前情回顾： 1、Cookie是浏览器提供的一种让程序员在本地存储数据的能力，让数据在客户端这边更持久化。 2、C
Cookie和Session（会话技术）
s17856147699的博客
03-22 8858
Cookie和Session（会话技术）
session和cookie
最新发布
SYWL的博客
09-03 896
session和cookie详解
cookie&session&jsp
LyonBlog
02-05 1525
第一章-会话的概念 1.1 会话的概念 会话的概念 ​ 会话：浏览器和服务器之间的多次请求和响应。 ​ 用户打开浏览器，连接服务器，浏览不同的网页(资源)，发出多个请求，直到关闭浏览器的过程，称为一次会话(多次请求). ​ 我们在会话的过程(多次请求)之中,用户可能会产生一些数据,这些数据话有的需要保存起来的,我们就可以通过会话技术来保存用户各自的数据 为什么要使用会话技术 ​ 保存一次通话过程中的数据！ ​ 会话技术中数据的保存方式： ​ 浏览器存储会话数据：cookie ​ 服务器存储会话数据：se
Cookie和Session详解及区别
fly的博客
08-10 777
会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含==多次==请求和响应。从浏览器发出请求到服务端响应数据给前端之后，一次会话(在浏览器和服务器之间)就被建立了会话被建立后，如果浏览器或服务端都没有被关闭，则会话就会持续建立着浏览器和服务器就可以继续使用该会话进行请求发送和响应，上述的整个过程就被称之为==会话==。
Cookie和Session
JavaLab
02-28 298
1.由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端...
cookie 与 session
11-27
session 与 Cookie 的 思维导图 与 4个域对象 思维语言描述详尽 是我学习 javaweb编程 的时候
Django cookie 与 session
12-20
本文将深入探讨Django中的Cookie与Session，以及如何在实际应用中使用它们。 首先，Cookie是存储在客户端（用户浏览器）上的小数据块，通常用于存储用户的一些非敏感信息，如会话ID或者用户偏好。当用户访问网站时...
Cookie与Session机制.doc
08-26
Cookie 与 Session 机制 Cookie 机制是 Web 程序中常用的技术，用来跟踪用户的整个会话。Cookie 通过在客户端记录信息确定用户身份。下面是 Cookie 机制的详细说明： 1. 什么是 Cookie？ Cookie 意为“甜饼”，是...
cookie与session
what_er的博客
04-09 223
cookie与sessionCookieSession（域）cookie的禁用 Cookie 1.cookie是有由服务器生成以响应（response）方式发送并保存在客户端的信息载体，客户端进行同类访问的时候。请求（request）中可获取cookie。 同类请求：资源路径相同 2.下图的默认路径为servlet资源路径 3.资源路径相同的访问可以获取cookie并进行操作 Session（...
Session,cookie,localStorage
weixin_34072637的博客
07-02 66
localStorage: 在浏览器端存储数据（存储在浏览器内部，不会跨浏览器）直接通过这个对象就可以访问或者修改这个数据 Cookie： 什么是Cookie Cookie意为“甜饼”，是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准，所有的主流浏...
cookie和session
CXY_C的博客
12-28 518
1、Cookie 什么是 Cookie? Cookie 翻译过来是饼干的意思 Cookie 是服务器通知客户端保存键值对的一种技术 客户端有了 Cookie 后，每次请求都发送送给服务器 每个 Cookie 的大小不能超过 4kb 1.1、Cookie的创建 分析： BaseServlet 页面 package com.aiguigu.servlet; import javax.servlet.ServletException; import javax.servlet.http.HttpServl
深入解析：Cookie与Session机制
"session机制与cookie机制" 在Web开发中，session和cookie机制是两种重要的状态管理工具，它们用于在无状态的HTTP协议中保持用户会话的状态。下面将详细阐述这两种机制。 一、术语session session通常指的是客户端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值