Cookie

Cookie

cookie的概念

cookie 是客户端与服务器端进行通讯使用的一个能够在浏览器本地化存储的技术

PS：chrome不支持本地文件的cookie读写

cookie的应用场景

七天免登陆
购物车信息
商品浏览记录

cookie的组成

cookie由键值对形式的文本组成，完整格式如下：
document.cookie = name=value[; expires=date][;path=路径][;domain=域名]

[]表示该值是可选
name=value: 为你要保存的键值对(必选)

利用decodeURI解码中文字符
利用json保存多条信息

expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选)

设置7天内生效的cookie

var date = new Date();  
date.setDate(date.getDate()+7); 
document.cookie = "user=katsuki;expires=" + date.toUTCString();

path=路径：访问路径， 默认为当前文件所在目录(可选) ，使用documnet.cookie获取时会从当前文件夹往上找到根目录的所有cookie

//cookie设置到根目录下路径，在这根目录下的所有文件均可找到该cookie
document.cookie = "path=/";

domain=域名：访问域名，限制在该域名下访问(可选) 没有设置则默认为当前域名

cookie的操作

cookie的获取和设置

写入未有的属性名为设置，写入已有的属性名为修改

document.cookie = 'name=kasami';//设置
document.cookie = 'name=katsuki';//修改

获取，获取到所有cookie

<script>
//一次只能写入一个cookie，两条语句时是写入一个cookie的二个值，不会覆盖
document.cookie = 'user=katsuki';
document.cookie = 'age=18';
//获取时得到所有cookie，多个cookie之间用分号+空格（; ）来隔开
console.log(cookie); // 输出 user=katsuki; age=18
var cookie = document.cookie;
var cookie = cookies.split('; ');//['user=katsuki','age=18']
//遍历数组获取想要的键值对
cookie.forEach(function(item){
	var arr = item.split('=');
	if(arr[0] === 'user' || arr[0] === 'age'){
		//根据需要把值赋值到相应变量、元素
		//此处用设置样式时写法
		katsuki.style[arr[0]] = arr[1];
	}
})
</script>

cookie的删除

利用设置过期时间达到删除的效果。

var date = new Date();  
date.setDate(date.getDate()-1); //当前日期减1变为临时cookie
document.cookie = "user=katsuki;expires=" + date.toUTCString();

cookie的封装

封装cookie的增删改查

var Cookie = {
	//增 改
	/**
	 * 设置cookie
	 * @param  {String} name [cookie名]
	 * @param  {String} value [cookie值]
	 * @param {[Object]} params  [参数，是一个对象]
		* expires     {Date}       日期
		* path        {String}     保存路径
		* domain      {String}     域名
		* secure      {Boolean}    安全性
	 */
	set: function(name,value,params){
		//必填
		var str = name + '=' + value;
		//判断是否有参数
		if(params){
			//有效期
			if(params.expires){
				str += ';expires=' + params.expires.toUTCString();
			}
			//保存路径
			if(params.path){
				str += ';path=' + params.path;
			}
			//域名
			if(params.domain){
				str += ';domain=' + params.domain;
			}
			//安全性
			if(params.secure){
				str += ';secure';
			}
		}
		document.cookie = str;
	},
	//删
	remove: function(name){
		var now = new Date();
		now.setDate(now.getDate()-1);
		//document.cookie = name + '=null;expirse=' + now.toUTCString();
		//利用设置达到删除效果
		this.set(name,'null',{expirse:now});
	},
	//查
	/**
	 * 获取name对应的cookie值
	 * @param  {String} name [cookie名]
	 * @return  {String}  [返回name对应的cookie值]
	 */
	get: function(name){
		//获取所有cookie
		var all = document.cookie;
		//用于保存结果
		var res = '';
		//分割 String --> Arry
		var cookies = all.split('; ');
		//遍历
		cookies.forEach(function(item){
			//拆分name 和 value
			var arr = item.split('=');
			if(arr[0]===name){
				res = arr[1];
			}
		});
		return res;
	}
}

cookie发送到服务器

cookie会随着请求自动发送到后台服务器，接收cookie

cookie跟json的配合

cookie只能存String，不能直接放入数组存入，需要json
json字符串：外观类似于对象/数组的字符串

* 格式要求：
	* 属性名和字符串必须使用双引号
	* 不能有多余的逗号
	* 不能有注释
* 属性值必须为以下类型
	* String
	* Number
	* Boolean
	* Object
	* Array
	* Null

var json = '{"author": "katsukichan"}'

//Object/Array -> json字符串
JSON.stringify();
//json字符串 -> Object/Array
JSON.parse(json);

XSS攻击（了解）

cross-site scripting（跨域脚本攻击）是最常见的Web攻击，其重点是“跨域”和“客户端执行”。有人将XSS攻击分为三种，分别是：

Reflected XSS（基于反射的XSS攻击）
XSS攻击脚本被web server反射回来给浏览器执行

Stored XSS（基于存储的XSS攻击）
XSS恶意代码存储在web server中，一般是通过网站的留言、评论、博客、日志等等功能将攻击代码存储到web server上的

DOM-based or local XSS（基于DOM或本地的XSS攻击）
根据用户的输入来动态构造一个DOM节点，如果没有对用户的输入进行过滤，那么也就导致XSS攻击的产生

XSS 攻击的防御

对输入(和URL参数)进行过滤
对输出进行编码