js cookie使用攻略（js、nodejs获取与使用cookie、cookie实现自动登录）js获取与设置cookienodejs获取与设置cookie学以致用-实现简易自动登录

53 阅读 0 评论 35 点赞

我是靠谱客的博主温暖小霸王，最近开发中收集的这篇文章主要介绍js cookie使用攻略（js、nodejs获取与使用cookie、cookie实现自动登录）js获取与设置cookienodejs获取与设置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('启动成功')
})