目录：1：var、let、const区别；2：JS事件捕获与冒泡；3：cookie、sessionStorage、localStorage、session。
一、var、let、const区别
var：没有块的概念，可以跨块访问，不能跨函数访问
let：只能在块作用域里访问，不能跨块访问，也不能跨函数访问
const：定义常量，只能在块作用域里访问，而且不能修改
补充：const定义的对象属性是否可以改变，答案是可以的，因为对象是引用类型，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，是被允许的。
{var i = 100;}
console.log(i) // 9
{let i = 100;}
console.log(i) // i is not defined
1.1、let 配合for循环的独特应用
js中for循环体比较特殊，每次执行都是一个全新的独立的块作用域，let声明的变量传入到for循环体的作用域后，不会发生改变，不受外界影响。如下：
补充：需要更好的理解下面代码需要理解微任务和宏任务（后续再做分析）
{
let i = 0;
setTimeout(function(){console.log(i)},100) // i = 0
}
{
let i = 1;
setTimeout(function(){console.log(i)},100) // i =1
}
{
let i = 2;
setTimeout(function(){console.log(i)},100) // i = 2
}
而用var声明的变量，因为var变量在块中并没有作用域约束，所以就是定义全局变量i，而重复声明一个同名变量，后面声明覆盖前面声明，所以最后i = 2，最后打印的访问的变量在局部找不到就向上级查找，找到全局变量i，均为2；
{
var i = 0;
setTimeout(function(){console.log(i)},100) // i = 2
}
{
var i = 1;
setTimeout(function(){console.log(i)},100) // i = 2
}
{
var i = 2;
setTimeout(function(){console.log(i)},100) // i = 2
}
二、JS事件捕获与冒泡
事件冒泡：事件冒泡会从当前触发的事件一级一级往上传递，依次触发，直到document为止。
事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标未知。
如：我们创建三个div,每个div添加点击事件（利用事件监听添加点击事件，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获）。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
#box1 { width: 300px; height: 300px; background: blueviolet; }
#box2 { width: 200px; height: 200px; background: aquamarine; }
#box3 { width: 100px; height: 100px; background: tomato; }
div { overflow: hidden; margin: 50px auto; }
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script type="text/javascript">
function sayBox3(event) {
console.log(‘你点了最里面的box‘);
}
function sayBox2() {
// console.log(event)
// event.stopPropagation();
console.log(‘你点了最中间的box‘);
}
function sayBox1() {
console.log(‘你点了最外面的box‘);
}
// 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获 结果为： 你点了最里面的box 你点了最中间的box 你点了最外面的box
document.getElementById(‘box3‘).addEventListener(‘click‘, sayBox3, false);
document.getElementById(‘box2‘).addEventListener(‘click‘, sayBox2, false);
document.getElementById(‘box1‘).addEventListener(‘click‘, sayBox1, false);
</script>
</html>
当我们点击最里面的dom时依次输出：你点了最里面的box -- 你点了最中间的box -- 你点了最外面的box
当我们点击中间的div时依次输出：你点了最中间的box -- 你点了最外面的box
由此可以得出：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
此时如果我们将参数改为true时：打印的结果依次为：你点了最外面的box -- 你点了最中间的box -- 你点了最里面的box
由此可以得出：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
2.1、阻止冒泡
假设我想点最里面的box，但是绑定在中间及最外的box上的事件不去触发，这里就需要用到的阻止冒泡
具体只要修改sayBox3代码如下：此时只会打印 你点了最里面的box
function sayBox3(event) {
event.stopPropagation();
console.log(‘你点了最里面的box‘);
}
2.2、事件委托
事件委托其实就是，通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
实现原理：采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，我们在ul绑定事件的函数里通过一些判断实现想要的事情
function clickLi() { alert(‘你点击了li‘); } document.getElementById(‘isUl‘).addEventListener(‘click‘, function(event) { // 每一个函数内都有一个event事件对象，它有一个target属性，指向事件源 var src = event.target; // 我们判断如果target事件源的节点名字是li，那就执行这个函数 // target里面的属性是非常多的，id名、class名、节点名等等都可以取到 if(src.nodeName.toLowerCase() == ‘li‘) { clickLi() ； } });
三、cookie、sessionStorage、localStorage、session
4.1、cookie
问题：打开一个京东的网站，在没有登录的情况下，添加商品到购物车，关闭浏览器重新打开后，购物车是否有数据？
解释：说明数据存放在我的客户端这台机器的硬盘上。
技术：Cookie (网络会话状态跟踪的技术)
会话是由一组请求和响应组成，是围绕着一件相关事情所进行的请求和响应。所以这些请求和响应之间一定是需要有数据传递的，即是需要进行会话状态跟踪的。
然而http协议是一种无状态协议，在不同的请求间是无法进行数据传递的，此时就需要一种可以进行请求间数据传递的会话跟踪技术，而cookie就是一种这样的技术。
Cookie是由服务器生成，保存在客户端的一种信息载体。这个载体中存放着用户访问该站点的会话状态信息，用户在提交第一次请求后，由服务器生成cookie,并将其封装到响应头中，
以响应的形式发送给客户端。客户端接收这个到这个响应后，将Cookie保存到客户端。当客户端再次发送同类请求后，在请求中会携带保存在客户端的cookie数据，发送到服务的，
有服务器对会话进行跟踪。Cookie由若干键值对构成
4.2、session
当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。
如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。
通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。
4.3、sessionStorage
用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
各个标签页的sessionStorage 是独立的 。
在a标签页写入修改删除sessionStorage ，不会影响到已经打开的标签页中的sessionStorage 。
通过a标签，window.open,window.location,windows.history ，右键复制 等方式在新标签页，本页，iframe ，新窗口中打开新页面，当前标签页的 sessionStorage 会传递到新页面。
通过按住 ctrl键打开新标签页，或者右键菜单打开新标签页，新窗口 ，当前标签页的 sessionStorage 是不会传递到新页面的 。
4.4、localStorage
用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。