本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文介绍前端开发者，如何使用cookie，介绍客户端也就是前端html中的js、服务端nodejs，两端的cookie获取与设置方法，掌握之后就可以使用cookie完成一些用户状态的控制，常用于用户登录态session管理等。

html中的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

res.set({
  'Set-Cookie': ['name=' + name, 'pass=' + pass],
})

这里多了个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,
      })
  }

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

注意：请用nginx代理测试html页面，以文件形式访问html再cors跨域测试是没办法使用cookie的。

不会使用nginx请移步：nginx 入门攻略（一篇掌握nginx基本使用方法）。

测试：就勾选自动登录然后登录完刷新看看会不会自动登录，显示登录成功。

nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;

    sendfile on;

    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;

        location / {
            root html;
            index index.html index.htm;
            location /api {
                proxy_pass http://localhost:3000;
            }
        }
    }
}

前端代码

只使用到获取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('api/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('api/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('启动成功')
})

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

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

前言

html中的js获取与设置cookie

nodejs获取与设置cookie

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

尾言