目录
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('启动成功') })
