- cookie是存储在客户端浏览器中的一段文本信息。
- 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
- 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
cookie的特点
- 存储大小有限制,一般是 4 KB 左右
- 数量有限制,一般是 50 条左右
- 有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
- 有域名限制,也就是说谁设置的谁才能读取
- 存在风险
cookie的创建
document.cookie = 'key=value;expires=日期对象;path=路径;domain=域名;secure'
- 浏览器不识别的编码问题
- 编码:encodeURIComponent()
- 解码:decodeURIComponent()
下面是一个简单的封装函数,用于设置、获取和删除 Cookie:
javascript
// 设置 Cookie
function setCookie(name, value, expires, path) {
var cookieString = name + '=' + encodeURIComponent(value);
if (expires) {
var date = new Date();
date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000));
cookieString += '; expires=' + date.toUTCString();
}
if (path) {
cookieString += '; path=' + path;
}
document.cookie = cookieString;
}
// 获取 Cookie
function getCookie(name) {
var cookieName = name + '=';
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(cookieName) === 0) {
return decodeURIComponent(cookie.substring(cookieName.length));
}
}
return null;
}
// 删除 Cookie
function deleteCookie(name) {
setCookie(name, '', -1);
}
使用示例:
javascript
// 设置 Cookie
setCookie('username', 'john', 7, '/');
// 获取 Cookie
var username = getCookie('username');
console.log('Username:', username);
// 删除 Cookie
deleteCookie('username');
这个封装函数提供了 setCookie()、getCookie() 和 deleteCookie() 三个函数来进行 Cookie 的设置、获取和删除操作。
setCookie(name, value, expires, path): 设置 Cookie。name 是要设置的 Cookie 名称,value 是要设置的 Cookie 值,expires 是可选参数,表示 Cookie 的过期时间(以天为单位),path 是可选参数,表示可访问该 Cookie 的路径,默认为根目录。
getCookie(name): 获取 Cookie。name 是要获取的 Cookie 名称,返回获取到的 Cookie 值,如果找不到则返回 null。
deleteCookie(name): 删除 Cookie。name 是要删除的 Cookie 名称,将该 Cookie 的值设置为空字符串,并将过期时间设置为过去的时间。
使用这些封装函数可以方便地进行 Cookie 的操作,包括设置、获取和删除。