Cookie存储

首先，前端存储方式有四种，Cookie，localStorage，SessionStorage，IndexDB，今天分享的是第一种存储方式 Cookie 存储方式

Cookie，JavaScript 中 Document 的一个属性，其作用是可以在其浏览器内部写入一条键值对形式的字符串，由于其自身存储数据的限制与缺陷，一般不建议使用。但在实际工作中一般都会用于存储一些简单的信息，用于对用户行为上做一定的规范。

cookie 的创建

// 1. 创建 Cookie
var cookie = document.cookie = 'name=value';

如此，一个 cookie 数据就创建成功了。效果如下：

Cookie 创建成功后，须在本地服务器下的 Application（应用） 中查看

   

JavaScript 原生写法

// document.cookie = 'name=value[;expires = 日期对象][;path = 路径][;domain = 域名][;secure(是否加密)]';

   常用参数

• 名称：这条 Cookie 的名字，类似于人的姓名
• 值：这条 Cookie 具体所承载的数据内容

• Domain: 服务器域名地址，这里使用的是本地服务器，所以域名为 127.0.0.1

• Path： 路径，Cookie 的生效范围。即在本页面所产生的 Cookie 是否在其他页面生效。因为 cookie 有域名限制，要想在其他页面中拿到这条 cookie，需要改变路径地址，也就是将它的作用域范围提升，才能进行全局访问

• Expires/Max-Age：有效期，字面意思。就是 Cookie 的生存时间，超过这个时间，Cookie 会被浏览器自动删除，一般情况下，浏览器关闭后，Cookie 会被清空，所以在实际应用中一般都需要进行设置有效期

• Secure：是否加密，属性设置为 true 时，该条 Cookie 将只能以 https 的这种形式发送到服务器

     

创建cookie

​// 创建cookie
cookie(key, value, json) {
// 初始化
	json = json || {};
	// key = value
	// 键值对可能传入的是中文
	let cookie_str = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
	// 有效期
	// 如果传入的不是 NaN
	if (!isNaN(json.expires)) {
		// 创建日期对象
		let date = new Date();
		date.setDate(date.getDate() + json.expires);
		cookie_str += ';expires=' + date;
	}
	// 路径
	if (json.path) {
		cookie_str += ';path=' + json.path;
	}
	// 域名
	if (json.domain) {
		cookie_str += ';domain=' + json.domain;
	}
	// secure(是否加密)
	if (json.secure) {
		cookie_str += ';secure';
	}
	// 创建 cookie
	document.cookie = cookie_str;
}

​

获取Cookie(方式一)

// 获取 cookie
getCookie() {
	// 存入 cookie 的为编码后的 , 需先编码后查
	key = encodeURIComponent(key) + '=';
	// 获取 cookie 的整个串(父串)
	let cookie = document.cookie;
	// 从父串中查
	let start = cookie.indexOf(key);
	// 判断 start 是否为 -1, 
	// 是	截取到长度
	// 否	求 end
	if (start !== -1) {
		let end = cookie.indexOf(';', start);

		if (end === -1) {
			end = cookie.length;
		}
		return decodeURIComponent(cookie.substring(start + key.length, end));
	}
}

获取Cookie(方式二)

let arr = document.cookie.split('; ');
for (let i = 0, len = arr.length; i < len; i++) {
	let list = arr[i].split('=');
	// 
	if(encodeURIComponent(key) === list[0]){
		return decodeURIComponent(list[1]);
	}	
}

删除Cookie

removeCookie(key, json) {
	json = json || {};
	if (json.path) {
		document.cookie = encodeURIComponent(key) + '=;expires=' + new Date(0) +';path=' + json.path;
	}else{
		document.cookie = encodeURIComponent(key) + '=;expires=' + new Date(0);
    }
}

完整版

// 外部传入一个键值对
			// 封装
			// 创建一个对象 $
			let $ = {
				// 创建方法  cookie	getCookie	removeCookie
				// 需要 key, value, 对象(可加可不加)
				cookie(key, value, json) {
					// 初始化
					json = json || {};
					// key = value
					// 键值对可能传入的是中文
					let cookie_str = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;

					// 有效期
					// 如果传入的不是 NaN
					if (!isNaN(json.expires)) {
						// 创建日期对象
						let date = new Date();
						date.setDate(date.getDate() + json.expires);
						cookie_str += ';expires=' + date;
					}
					// 路径
					if (json.path) {
						cookie_str += ';path=' + json.path;
					}
					// 域名
					if (json.domain) {
						cookie_str += ';domain=' + json.domain;
					}
					// secure(是否加密)
					if (json.secure) {
						cookie_str += ';secure';
					}
					// 创建 cookie
					document.cookie = cookie_str;
				},
				// 获取 cookie
				getCookie() {
					// // 存入 cookie 的为编码后的 , 需先编码后查
					// key = encodeURIComponent(key) + '=';
					// // 获取 cookie 的整个串(父串)
					// let cookie = document.cookie;
					// // 从父串中查
					// let start = cookie.indexOf(key);
					// // 判断 start 是否为 -1, 
					// // 是	截取到长度
					// // 否	求 end
					// if (start !== -1) {
					// 	let end = cookie.indexOf(';', start);

					// 	if (end === -1) {
					// 		end = cookie.length;
					// 	}
					// 	return decodeURIComponent(cookie.substring(start + key.length, end));
					// }

					// 利用切割
					let arr = document.cookie.split('; ');
					for (let i = 0, len = arr.length; i < len; i++) {
						let list = arr[i].split('=');
						// 找到key,返回value值
						if (encodeURIComponent(key) === list[0]) {
							return decodeURIComponent(list[1]);
						}
					}
				},
				removeCookie(key, json) {
					json = json || {};
					if (json.path) {
						document.cookie = encodeURIComponent(key) + '=;expires=' + new Date(0) + ';path=' + json.path;
					}else{
						document.cookie = encodeURIComponent(key) + '=;expires=' + new Date(0);
					}
				}
				
			}

文章仅供参考，有什么好的建议或意见，欢迎留言