Cookie概念及封装和优化
cookie概念
为什么会有cookie？
- web应用程序之间的交互是需要遵循 http协议（即超文本传输协议） 的，而http协议是无状态的，即链接之后就会断开，而且不会记录用户信息。
- 此时cookie便应运而生，常见当我们登录一个网站时，如果点击了记住密码和账号，那么下次再打开网站便可以直接登入。
cookie特点
- cookie是存在于浏览器下的，以字符串的形式（key=value）存储数据，每一个 key=value 就是一条数据，多个数据之间以分号（;）分割
- 有过期时间，一般是会话级别（也就是浏览器关闭就过期了），也可以手动设置过期时间
- 存储大小有限制，一般是 4 KB 左右
- 数量有限制，一般是 50 条左右
- 有域名限制，也就是说谁设置的谁才能读取
- 请求中自动携带。只要 cookie 里面有东西， 就会在发送请求的时候自动携带
cookie的使用
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie
Google chrome浏览器可在在控制台的Application下查看cookie
一条cookie信息包括：
- name：一个cookie的名称
- value：一个cookie的值
- domain：为可以访问此cookie的域名
- path：为可以访问此cookie的页面路径
- expires/Max-Age ：为此cookie生效期。不设置的话默认值是Session级别
- size：此cookie大小
- http：cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie
- secure：设置是否只能通过https来传递此条cookie
cookie操作
- 读取cookie的内容
var cookie = document.cookie;
console.log(cookie) // 就能得到当前 cookie 的值
- 设置 cookie 的内容
// 设置一个时效性为会话级别的 cookie
document.cookie = 'a=100'
// 设置一个有过期时间的 cookie
// 这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失
document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'
- 删除 cookie 的内容
// 因为 cookie 不能直接删除
// 所以只能把某一条 cookie 的过期时间设置成当前时间之前
// 那么浏览器就会自动删除 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'
cookie操作封装
1、获取cookie
// 获取一条cookie，只需要name 即可，返回相应的value
function getCookie(name){
var cookie_str = document.cookie;
var cookie_arr = cookie_str.split("; ");
var value_res = "";
for(var i = 0; i < cookie_arr.length; i ++){
if (cookie_arr[i].split("=")[0] === name) {
value_res = cookie_arr[i].split("=")[1];
}
}
return value_res;
}
2、设置cookie
// name value 为必选设置参数项，options为可选设置参数项
function setCookie(name, value, options){
// 判断是否是对象
function isObject( obj ){
return (typeof obj === "object" && obj !== null && obj.constructor && obj.constructor === Object)
}
if (!isObject(options)) {
options = {};
}
if (typeof options.expires === "number") {
var d = new Date();
d.setDate(d.getDate() + options.expires);
}
return (document.cookie = [
name + "=" + value,
typeof options.expires === "number" ? ";expires=" + d : "",
typeof options.domain === "string" ? ";domain=" + options.domain : "",
typeof options.path === "string" ? ";path=" + options.path : "",
].join(""));
}
3、删除cookie
function removeCookie(name, options){
// 支持两种传参方式：("name", {path : "/"}) 或 ("name", "/")
// 为什么要合并对象，因为要向对象之中加入数据 以达到删除 cookie 的功能
setCookie(name, "", isObject(options) ? assign(options, {expires : -1}) : {path : options, expires : -1});
// 对象合并;
function assign(){
var target = arguments[0];
for(var i = 1 ; i < arguments.length ; i ++){
for(var attr in arguments[i]){
target[attr] = arguments[i][attr];
}
}
return target;
}
}
4、封装优化
合并【设置cookie封装函数】和【获取cookie封装函数】
function cookie(name, value, options){
// 如果参数大于一个，并且value是一个字符串。那么认为是在设置 cookie
if ( arguments.length > 1 && typeof value === "string" ) {
// 设置 cookie
if(!isObject( options )){
options = {};
}
if( typeof options.expires === "number"){
var d = new Date();
d.setDate( d.getDate() + options.expires );
}
return (document.cookie = [
name + "=" + value,
typeof options.expires === "number" ? ";expires=" + d : "",
typeof options.domain === "string" ? ";domain=" + options.domain : "",
typeof options.path === "string" ? ";path=" + options.path : "",
].join(""));
}
// 只有一个参数，则是 查询 cookie
var cookie_str = document.cookie;
var cookie_arr = cookie_str.split("; ");
var value_res = "";
cookie_arr.forEach(function(item){
if (item.split("=")[0] === name) {
value_res = item.split("=")[1];
}
});
return value_res;
}
