js cookie使用攻略(js、nodejs获取与使用cookie、cookie实现自动登录

简介: js cookie使用攻略(js、nodejs获取与使用cookie、cookie实现自动登录

目录


js获取与设置cookie



js操作cookie都是对document.cookie进行操作。

获取这里使用的是正则匹配。

设置时document.cookie是字符串形式例如"name=123"。

expires是设置cookie的期限,形式为new Date().toUTCString(),例"Thu, 25 Nov 2021 02:25:41 GMT",还有其余设置请自行查阅字典。

cookie键值对与设置用;隔开,完整设置例子为document.cookie='name=123;expires=Thu, 25 Nov 2021 02:25:41 GMT'

    // 获取html页面cookie方法
    const getCookie = (name) => {
      let result = document.cookie.match(
        '(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)'
      )
      return result ? result.pop() : ''
    }
    // 设置html页面cookie方法
    const setCookie = (name = '', value = '') => {
      document.cookie =
        name +
        '=' +
        value +
        ';expires=' +
        new Date(
          parseInt(new Date().getTime()) + 60 * 60 * 24 * 1000
        ).toUTCString()
    }

nodejs获取与设置cookie



nodejs获取cookie一般是获取从请求头传入的cookie:req.headers.cookie

设置cookie时,'Set-Cookie’对应的值应是数组,涉及到响应头设置多个cookie:nodejs如何在响应头设置多个cookie

这里多了个path的设置,path是cookie的路径,默认会等于请求发送的路径/[api],[api]指代各种请求路径,静态页面首页进入路径大部分只是/,不设置成/的话静态页面上无法访问cookie。

  (req, res) => {
      const cookies = req.headers.cookie || ''
      //获取cookie方法
      const getCookieValue = (name) => {
        let result = cookies.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)')
        return result ? result.pop() : ''
      }
      //从请求头取出params并设置cookie
      const { name, pass, remember } = req.body
      const setCookies = []
      setCookies.push('name=' + name)
      setCookies.push('pass=' + pass)
      setCookies.push('remember=' + remember)
      //此处cookie时限设置为一天
      const expires =
        ';expires=' +
        new Date(
          parseInt(new Date().getTime()) + 60 * 60 * 24 * 1000
        ).toUTCString()
      //此处设置前端cookie路径,方便页面加载时正确获取cookie
      const path = ';path=' + '/'
      const Cookies = setCookies.map((cur) => {
        return cur + expires + path
      })
      //注意cookies为数组形式
      res.set({
        'Set-Cookie': Cookies,
      })
  }

学以致用-实现简易自动登录


前端代码

只使用到获取cookie。

<!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>Document</title>
    <!-- <link rel="shortcut icon" href="./favicon.ico"> -->
  </head>
  <style></style>
  <body>
    <input type="text" name="name" id="name" placeholder="帐号" />
    <input type="password" name="pass" id="pass" placeholder="密码" />
    自动登录<input type="checkbox" id="remember" />
    <button type="button" onclick="login()">登陆</button>
  </body>
  <script>
    // 登录方法  入参只是为自动登录服务的
    const login = async (remname = '', rempass = '') => {
      const name = remname ? remname : document.getElementById('name').value
      const pass = rempass ? rempass : document.getElementById('pass').value
      //是否勾选自动登录
      const remember = document.getElementById('remember').checked
      const response = await fetch('/post/login', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name,
          pass,
          remember,
        }),
      })
      const res = await response.json()
      alert(res.msg)
    }
    // 加载页面时检查是否存在自动登录的cookie,存在则自动调用登录方法
    window.onload = () => {
      const remember = getCookie('remember')
      const name = getCookie('name')
      const pass = getCookie('pass')
      if (remember) {
        login(name, pass)
      }
    }
    // 获取html页面cookie方法
    const getCookie = (name) => {
      let result = document.cookie.match(
        '(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)'
      )
      return result ? result.pop() : ''
    }
  </script>
</html>

nodejs服务端代码

只使用到设置cookie。

import express from 'express'
const app = new express()
app.use(express.json())
//为了方便测试设置了静态的账号密码,正常应该从数据库获取
const user = {
  name: 'root',
  pass: '123456',
}
app.post('/login', (req, res) => {
  const { name, pass, remember } = req.body
  if (name === user.name && pass === user.pass) {
    //如果帐号密码正确且勾选自动登录则进行cookie设置,送回客户端保存
    if (remember) {
      const setCookies = []
      setCookies.push('name=' + name)
      setCookies.push('pass=' + pass)
      setCookies.push('remember=' + remember)
      //时限设置一天
      const expires =
        ';expires=' +
        new Date(
          parseInt(new Date().getTime()) + 60 * 60 * 24 * 1000
        ).toUTCString()
      //设置可访问域
      const path = ';path=' + '/'
      const Cookies = setCookies.map((cur) => {
        return cur + expires + path
      })
      res.set({
        'Set-Cookie': Cookies,
      })
    }
    res.send({ msg: '登录成功' })
  } else {
    res.send({ msg: '帐号或密码错误' })
  }
})
app.listen(3000, () => {
  console.log('启动成功')
})


相关文章
|
3月前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
187 0
|
23天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
33 1
|
28天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
1月前
|
JavaScript 前端开发 开发工具
Node.js——初识Node.js
Node.js——初识Node.js
27 4
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
31 4
|
3月前
|
存储 缓存 数据处理
php学习笔记-php会话控制,cookie,session的使用,cookie自动登录和session 图书上传信息添加和修改例子-day07
本文介绍了PHP会话控制及Web常用的预定义变量,包括`$_REQUEST`、`$_SERVER`、`$_COOKIE`和`$_SESSION`的用法和示例。涵盖了cookie的创建、使用、删除以及session的工作原理和使用,并通过图书上传的例子演示了session在实际应用中的使用。
php学习笔记-php会话控制,cookie,session的使用,cookie自动登录和session 图书上传信息添加和修改例子-day07
|
3月前
|
JavaScript 前端开发 开发工具
五子棋小游戏(JS+Node+Websocket)可分房间对战
本文介绍了通过JS、Node和WebSocket实现的五子棋游戏,支持多人在线对战和观战功能。
59 1
五子棋小游戏(JS+Node+Websocket)可分房间对战
|
2月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
45 1
|
2月前
|
缓存 监控 JavaScript
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
91 0
|
2月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
22 0