一、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{
200px;
height: 100px;
background-color: orange;
border: 1px solid black;
margin: 100px auto;
text-align: center;
padding: 40px
}
#login input{
200px;
height: 24px;
font-size: 16px;
margin-bottom: 10px
}
#btn1{
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));