13、cookie

2021-10-11 22:37:24

一、cookie：

1、cookie

cookie的应用：

1、用户名密码自动登录

2、购物车商品的保存。

<1>缓存信息，只存储特定的重要的信息。程序编程完成。缓存信息cookie技术。

<2>浏览器缓存

cookie实现原理：

在本地的客户端的磁盘上以很小的文件形式保存数据。

【注】IE、火狐、谷歌浏览器的cookie，在服务器环境下才能生效。

cookie是一个字符串，键/值对组成的字符串。

【注】1、name和value必须有的。

2、大括号里面的键值对是可选项，按照需求进行添加。

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

cookie设置成功以后，存储在，以当前url中域名命名的文件夹中

name=value

//设置cookie

// document.cookie = "username=tianyufei";

		//获取cookie

		// alert(document.cookie);

expires=日期对象

过期日期：

1、如果不设置，默认会话，当前会话结束的时候/当你关闭掉当前窗口的时候，cookie消失。

		/*

			n天后的日期

		*/

		function getNumOfDate(n){

			var d = new Date();

			var day = d.getDate();

			d.setDate(day + n);

			return d;

		}

		//http://10.30.155.73/cookie/01cookie.html

		//http://localhost/cookie/01cookie.html

		//http://127.0.0.1/cookie/01cookie.html

		// alert(getNumOfDate(7));

一般情况下，在存储cookie的时候

1、现将中文转成字符存储。 utf-8(3个字符表示一个函数) gbk(2个字符表示一个汉字)

2、读取，将字符转成中文读取。

encodeURIComponent 编码

decodeURIComponent 解码

            // document.cookie = "超级英雄=钢铁侠;expires=" + getNumOfDate(7);

			// alert(document.cookie);

			// document.cookie = encodeURIComponent("超级英雄") + "=" + encodeURIComponent("钢铁侠") + ";expires=" + getNumOfDate(7);

			// alert(decodeURIComponent(document.cookie));

了解:path、domain、secure

path 限制访问路径

如果不设置，默认是，当前加载的html页面的路径

【注】访问的路径和存储cookie路径必须一致，不一致就禁止访问。

            // document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";path=" + "/cookie/code/";

			// alert(document.cookie);

domain 限制访问域名主机名/IP

如果不设置，默认是，当前加载该页面的主机名。

【注】如果存储cookie的时候，domain中设置的域名，和访问的域名不一样。存储cookie失败。

            /*document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";domain=" + "10.30.155.74";

			alert(1);*/

secure 安全性

默认false

任何来源的网站都可以访问cookie，限制访问协议

http https

设置，变成true，只能被https协议访问。https协议更安全，证书认证。

【注】只能由https协议访问和存储。

            document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";secure";

2、封装cookie

设置cookie

setCookie()

取出cookie

getCookie()

删除cookie

removeCookie()

		//name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

		/*

			【注】expires 只穿过期的天数

		*/

		function setCookie(name, value, expires, path, domain, secure){

			//1、编码去存  name=value

			var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);

			//2、判断

			if(expires){

				cookieStr += ";expires=" + getNumOfDate(expires);

			}

			if(path){

				cookieStr += ";path" + path;

			}

			if(domain){

				cookieStr += ";domain" + domain;

			}

			if(secure){

				cookieStr += ";secure";

			}

			document.cookie = cookieStr;

		}

		function removeCookie(name){

			document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);

		}

		/*

			n天后的日期

		*/

		function getNumOfDate(n){

			var d = new Date();

			var day = d.getDate();

			d.setDate(day + n);

			return d;

		}

		setCookie("变种人", "镭射眼", 7);

		setCookie("七龙珠", "弗利萨", 30);

		setCookie("火影忍者", "鬼鲛", 100);

		// document.cookie = encodeURIComponent("变种人") + "=;expires=" + new Date(0);

		/*

			快速获取过去某一时刻

		*/

		// alert(new Date(0));

		/*

			变种人=镭射眼; 七龙珠=弗利萨; 火影忍者=鬼鲛

		*/

		/*

			cookie 过期以后，就自动清除了

			如果过期时间，设置，过去的某一个时间。

			【注】删除cookie，过期时间设置成过去某一时刻。

		*/

		alert(decodeURIComponent(document.cookie));

		removeCookie("变种人");

		alert(decodeURIComponent(document.cookie));

3、对象传参，cookie封装_进阶

		/*

			【注】expires 只穿过期的天数

		*/

设置cookie

setCookie()

		function setCookie(name, value, expires, path, domain, secure){

			//1、编码去存  name=value

			var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);

			//2、判断

			if(expires){

				cookieStr += ";expires=" + getNumOfDate(expires);

			}

			if(path){

				cookieStr += ";path=" + path;

			}

			if(domain){

				cookieStr += ";domain=" + domain;

			}

			if(secure){

				cookieStr += ";secure";

			}

			document.cookie = cookieStr;

		}

删除cookie

removeCookie()

		function removeCookie(name){

			document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);

		}

		/*

			传入对应的键

			返回对应的值

			字符串处理

		*/

取出cookie

getCookie()

		function getCookie(name){

			var cookieStr = decodeURIComponent(document.cookie);

			var start = cookieStr.indexOf(name);

			if(start == -1){

				return null;

			}else{

				//找到了，找结束的位置

				var end = cookieStr.indexOf(";", start);

				if(end == -1){

					//最后一个

					end = cookieStr.length;

				}

			}

			//提取键值对

			var subStr = cookieStr.substring(start, end);

			//变种人=镭射眼

			var arr = subStr.split("=");

			return arr[1];

		}

		/*

			n天后的日期

		*/

		function getNumOfDate(n){

			var d = new Date();

			var day = d.getDate();

			d.setDate(day + n);

			return d;

		}

		setCookie("变种人", "镭射眼", 7);

		setCookie("七龙珠", "弗利萨", 30);

		setCookie("火影忍者", "鬼鲛", 100);

		// document.cookie = encodeURIComponent("变种人") + "=;expires=" + new Date(0);

		/*

			快速获取过去某一时刻

		*/

		// alert(new Date(0));

		/*

			变种人=镭射眼; 七龙珠=弗利萨; 火影忍者=鬼鲛

		*/

		/*

			cookie 过期以后，就自动清除了

			如果过期时间，设置，过去的某一个时间。

			【注】删除cookie，过期时间设置成过去某一时刻。

		*/

		alert(getCookie("变种人"));  //0  7

		alert(getCookie("七龙珠"));  //9  16

		alert(getCookie("火影忍者"));//18  -1

		/*alert(decodeURIComponent(document.cookie));

		removeCookie("变种人");

		alert(decodeURIComponent(document.cookie));*/

4、cookie究极封装

前面的:

设置cookie

setCookie()

取出cookie

getCookie()

删除cookie

removeCookie()

获取日期 getNumOfDate()

都必须有.

分析： $_cookie() 实现 setCookie getCookie removeCookie

根据参数不同，可以将$_cookie设置三种不同的功能。

                setCookie

				$_cookie(name, value);

				$_cookie(name, value, obj);

				getCookie

				$_cookie(name)

				removeCookie

				$_cookie(name, null);

            function $_cookie(name, value, obj){

				//1、判断传入的参数个数

				switch(arguments.length){

					case 3:

						setCookie(name, value, obj);

						break;

					case 2:

						if(value == null){

							//removeCookie

							removeCookie(name);

						}else{

							setCookie(name, value);

						}

						break;

					case 1: //获取cookie

						return getCookie(name);

						break;

					default:

						alert("error");

						break;

				}

			}

			$_cookie("变种人", "万磁王", {

				expires: 7

			})

			$_cookie("七龙珠", "贝吉塔", {

				expires: 30

			})

			$_cookie("火影忍者", "日向宁次", {

				expires: 100

			})

			alert(decodeURIComponent(document.cookie));

			// alert($_cookie("七龙珠"));

			$_cookie("七龙珠", null);

			alert(decodeURIComponent(document.cookie));

登录Cookie

        <style>

			#login{

				width: 200px;

				height: 100px;

				background-color: orange;

				border: 1px solid black;

				margin: 100px auto;

				text-align: center;

				padding: 40px

			}

			#login input{

				width: 200px;

				height: 24px;

				font-size: 16px;

				margin-bottom: 10px

			}

			#btn1{

				width: 100px;

				height: 25px;

				background-color: gray;

				color: white;

				font-size: 15px

			}

		</style>

		<script src = "js/tool.js"></script>

		<script>

			/*

				1、第一次登录，输入用户名和密码

				2、登录成功

			*/

			window.onload = function(){

				//加载页面完成，判断之前是否存储过username这个cookie

				var usernameStr = $_cookie("username");

				// alert(usernameStr);

				if(usernameStr){

					$("#login").innerHTML = "欢迎回来";

				}

				$("#btn1").onclick = function(){

					//发送用户名和密码，进行登录操作

					//将用户名和密码缓存

					$_cookie("username", $("#username").value, {

						expires: 7

					})

					$_cookie("password", $("#password").value, {

						expires: 7

					})

					alert("第一次登录成功");

				}

			}

		</script>

	</head>

	<body>

		<div id = "login">

			<input id = "username" type="text" placeholder="用户名" />

			<input id = "password" type="password" placeholder="密码" />

			<br/>

			<button id = "btn1">登录</button>

		</div>

	</body>

二、ECMA5

1、严格模式

严格模式：更严格的语法

【注】想在哪个作用域下，使用严格模式，在哪个作用域下，写下面这句话。

"use strict"

【注】一般情况下不要写在全局作用域。

            function show(){

				"use strict";

				a = 10; //强制声明称全局变量

			}

			show();

			alert(a);

2、bind

强制修改函数中this指向

格式：函数.call(第一个参数传this的指向);

            function show(num1, num2){

				alert(this);

				alert(num1 + ',' + num2);

			}

			// show(); //object Window

			// show.call("hello", 10, 20);

apply

格式：函数.apply()

后续参数：直接放在一个数组中，当做第二个参数传入。

		// show.apply("world", [10, 20]);

【注】上述两个方法，是在函数调用的时候强制修改this指向。

/*

bind()

【注】预设this的指向。

返回值：还这个函数，这个函数的this，已经被预先设定。

		*/

		var show2 = show.bind("helloworld");

		// show2(30, 40);

		show.bind("helloworld")(30, 40);

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

3、数组方法

++重点++：indexOf filter forEach

其他了解。

indexOf

格式：数组.indexOf(元素, start)

从start开始，找元素第一次在数组中出现的位置。

返回值：返回-1没有找到，返回>=0，找到

            /*var arr = [10, 20, 30, 40, 50, 40];

			alert(arr.indexOf(40, 4));*/

forEach 遍历数组

格式：

数组.forEach(function(item, index, array){

item 当前遍历到的元素

index 当前遍历到的下标

array 当前遍历的数组本身

})

            // var arr = [10, 20, 30, 40, 50];

			/*arr.forEach(function(item, index, array){

				alert("item:" + item + ", index:" + index);

			})*/

			// arr.forEach(alert);

			// arr.forEach(console.log);

map 映射

            /*var arr = [10, 20, 30, 40, 50];

			var newArr = arr.map(function(item, index, array){

				return item + 5;

			})

			alert(arr);

			alert(newArr);*/

reduce 归并

            var arr = [10, 20, 30, 40, 50];

			var tmp = arr.reduce(function(pre, next, index, array){

				/*

					pre  上一次遍历，return 后面表达式的值

					next 当前遍历到的元素 从下标1开始遍历

				*/

				// alert(pre + ", " + next);

				return pre + next;

			})

			// alert(tmp);

filter 过滤

return 后面写过滤条件

            var arr = [10, 20, 30, 40, 50];

			var newArr = arr.filter(function(item, index, array){

				return item > 30;

			})

			// alert(newArr);

some

判断，这个数组中，是否有符合return后面表达式条件的元素。

返回：布尔值

【注】如果找到符合条件的元素，直接终止。

            var arr = [10, 20, 30, 40, 50];

            var res = arr.some(function(item, index, array){

				// alert(item + ", " + index);

				return item > 30;

			})

			// alert(res)

every

判断，这个数组中,所有元素都必须符合return后面表达式的要求。

返回值：布尔值

【注】只要找不符合条件，就直接终止，返回结果false

            var arr = [10, 20, 30, 40, 50];

            var res = arr.every(function(item, index, array){

				alert(item + ", " + index);

				return item < 30;

			})

			alert(res);

4、字符串

trim

格式：字符串.trim()

功能：去除，首部尾部空格。

            var str = "    he  l  lo    ";

			alert("|" + str + "|");

			alert("|" + str.trim() + "|");

三、ECMA6

1、let关键字

ECMA6

var 用关键字 let代替

通过var声明的变量，作用域以函数的大括号为界限的，

通过let声明的变量，作用域以大括号为界限的，++包括if for swtich++

            /*if(true){

				var num = 10;

				alert(num);

			}

			alert(num);*/

			/*if(true){

				let num = 10;

				alert(num);

			}

			alert(num);*/

			/*for(var i = 0; i < 5; i++){

				setTimeout(function(){

					alert(i);

				}, 2000);

			}*/

			/*for(let i = 0; i < 5; i++){

				setTimeout(function(){

					alert(i);

				}, 2000);

			}

			alert("循环执行完了");*/

			/*for(var i = 0; i < 5; i++){

				for(var i = 0; i < 5; i++){

					console.log(i);

				}

			}*/

			for(let i = 0; i < 5; i++){

				for(let i = 0; i < 5; i++){

					console.log(i);

				}

			}

2、const

var let 声明变量

const 声明不可修改的变量/常量

            var num = 100;

			num = 20;

			alert(num);*/

			/*const IP = "10.30.155.73";

			alert(IP);

			IP = 10;

			alert(IP);

3、箭头函数

            function show(){

				alert(123);

			}

			show();

声明函数的方式进行简化箭头函数

            /*function add(num1, num2){

				return num1 + num2;

			}*/

			var add = (num1, num2) => num1 + num2;

			alert(add(10, 20));

码农公寓