在web开发的过程中 cookie 肯定需要接触的,一个典型的应用是关于用户登录的,如果用户登录之后,再关闭,下次打开该网页已经自动登录,这样就可以利用服务器端发送cookie到客户端,再客户端存下来就可以了,当然也可以客户端自己存储登录信息到cookie,然后再打开网页的时候,自动发送保存的用户信息到服务端进行验证,具体cookie用来干什么的,可以自己google一下。
目前我自己使用了两种方式进行cookie的设置和读取:
1。客户端利用函数自己存储
根据document.cookie的原理,封装一些cookie的操作函数如下:
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
function setCookie (c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
function delCookie (name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
当需要存信息到cookie的时候,就可以调用setCookie就可以了,获取信息就调用getCookie, 删除信息就是delCookie.
以用户登录为例,可以存用户登录的用户名和密码(或者代表用户信息的其他格式)。当下次访问网页的时候,直接读取这些信息,发送到服务端去进行验证。
2。服务器设置cookie
express可以利用第三方组件cookie-parser去进行解析客户端来的req.cookies,也可以在返回信息给客户端的时候设置cookie,这样客户端在接受到这些信息的时候,就会将cookie信息自动保存到硬盘cookie里面,跟在客户端自己保存一样,不过要在客户端和服务器端做一下特殊的设置。
服务端设置:
const cookieparser = require('cookie-parser')
var exp = express()
exp.use(cors({
//credentials: true, //如果需要跨域那么需要设置这两个属性,表示服务器端接受这个域来的信息
//origin: 'http://localhost:8080'
})) // http zone
exp.use(cookieparser())
在进行这些初始化之后就可以进行调用函数进行设置/清除cookies
res.cookie(name, value [, options]); //设置cookies, options可以设置很多参数。
res.clearCookie(name [, options]); //清除cookies,
当然服务端读取cookie的时候,直接利用req.cookies或者req.signedCookies来读取参数信息
客户端设置:
在客户端如果UI服务器与业务服务器不是一个服务器(跨域操作),那么我们axios的参数里面要加上withCredentials,
var instance = axios.create({
baseURL: 'http://localhost:8082', //业务服务器
withCredentials: true //跨域,设置之后就会在发送请求的时候自动将cookie信息加到header里面
})
如上客户端和服务器端设置后,就可以通过服务器读取和设置cookie了。