文章目录

事件冒泡的机制
- 传递过程的参数
cookies sessionStorage localStorage
- 基本概念
- - Cookie
  - - cookie是什么?
    - cookie作用是什么？
  - localStorage
  - sessionStorage
- 安全性
- 异同
- session
- - cookie和session的区别
  - sessionID(桥梁)

事件冒泡的机制

菜鸟答的：

事件冒泡机制就是事件点击之后，事件会由点击的元素向上传递，例如：div里面有span，那么点击span的事件也会传递到点击div上面去。

HR说我回答的有点问题，HR说什么IE的冒泡机制是由上到下，其实他是错误的。

这里可能HR把事件的捕捉和冒泡搞混淆了。

见代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper,.wrapper1,.wrapper2{width: 500px;height: 500px;background-color: aqua;display: table-cell;vertical-align: middle;}.content,.content1,.content2{width: 100px;height: 100px;background-color: red;margin: auto;}.span1,.span11,.span12{display: inline-block;width: 30px;height: 30px;background-color: green;}</style>
</head>
<body><div class="wrapper"><div class="content"><span class="span1"></span></div></div><div class="wrapper1"><div class="content1"><span class="span11"></span></div></div><div class="wrapper2" onclick="fun1()"><div class="content2" onclick="fun2()"><span class="span12" onclick="fun3()"></span></div></div>
</body>
<script>document.querySelector(".wrapper").addEventListener("click",function(){alert("最外面的div被点击");});document.querySelector(".content").addEventListener("click",function(){alert("第二层的div被点击");});document.querySelector(".span1").addEventListener("click",function(){alert("最里面的span被点击");});document.querySelector(".wrapper1").addEventListener("click",function(){alert("最外面的div被点击");},true);document.querySelector(".content1").addEventListener("click",function(){alert("第二层的div被点击");},true);document.querySelector(".span11").addEventListener("click",function(){alert("最里面的span被点击");},true);function fun1(){alert("最外面的div被点击");}function fun2(){alert("第二层的div被点击");}function fun3(){alert("最里面的span被点击");}
</script>
</html>

传递过程的参数

cookies sessionStorage localStorage

这里菜鸟回答的是：
这三个我以前写过博客，现在不太记得了，只知道一个是当前界面有效，一个是保存在本地，然后cookie是和服务器传值，可以在网络请求的header中设置cookie

基本概念

Cookie MDN

Cookie

Cookie 是小甜饼的意思，顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如：你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

cookie是什么?

其实cookie 是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件，它和你的网络浏览行为有关，所以存储在你电脑上的cookies就好像你的一张身份证 ，你电脑上的cookie和其他电脑上的cookie是不一样的；cookie不能被视作代码执行，也不能成为病毒，所以它对你基本无害。

cookie作用是什么？

cookie的作用主要是，当你访问了某些网页，并且对网页的一些设置进行修改，cookie就能跟踪并记录到这些修改，当你下一次访问这个网页的时候，这个网页会分析你电脑上的cookie，进而采取措施像你返回更符合你个性化的网页；当然，目前大部分广告的定位基础也是基于cookie的，比如：你此前访问了大量的健身类网站，cookie记录了你的访问行为，广告主就能够根据你的访问行为，向你推送健身类的广告。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill（一文搞清楚前端 polyfill）的方案是种不错的选择。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

这里sessionStorage localStorage可以看菜鸟的博客：
重学前端 HTML5 Web 存储（缓存）/HTML5 Web SQL 数据库/HTML5 应用程序缓存（第八天）

安全性

需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

这里HR又说错了，他说什么localStorage会加密，其它不会加密，一脸懵逼，我当时还当真了！

异同

cookie 数据始终在同源的http请求中携带（即使不需要），都会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

session

既然都讲了cookie，干脆就把session也一起讲了

cookie和session的区别

作用范围不同，Cookie 保存在客户端（浏览器），Session 保存在服务器端（保存会话信息） --> Session 弥补了 HTTP 无状态特性，服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。
存取方式的不同，Cookie 只能保存 ASCII，Session 可以存任意数据类型，一般情况下我们可以在 Session 中保持一些常用变量信息，比如说 UserId 等。
有效期不同，Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭或者 Session 超时都会失效。
隐私策略不同，Cookie 存储在客户端，比较容易遭到不法获取，早期有人将用户的登录名和密码存储在 Cookie 中导致信息被窃取；Session 存储在服务端，安全性相对 Cookie 要好一些。
存储大小不同，单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie。

sessionID(桥梁)

用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建创建对应的 Session ，请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器，并通过响应头的 Set-Cookie：JSESSIONID=XXXXXXX 命令，向客户端发送要求设置 Cookie 的响应，浏览器接收到服务器返回的 SessionID 信息后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名。

当用户第二次访问服务器的时候，请求会自动判断此域名下是否存在 Cookie 信息，如果存在自动将 Cookie 信息也发送给服务端（有时候也需要自己设置），服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。

注意：

微信小程序不会自动向http请求头中加入cookie，所以服务器每一次被请求都会重新和其进行连接，所以要自己设置cookie。具体见：
微信小程序项目遇见问题三：有时候undefined不一定就是undefined | 解决微信小程序每次request请求，Cookie不一样 | request 获取不到返回值

感谢：
你真的了解 Cookie 和 Session 吗?
Session、Cookie、Token 【浅谈三者之间的那点事】

2021 肯特面试题2相关推荐

2021滴滴笔试题算法题
2021滴滴笔试题编程题第一题: 大概是:一个优秀的操作系统,应该具有一个好的分配任务的算法,现在假设一个任务具有等待时间和执行时间,且必须在先等待后执行,而计算机每次只能执行一个任务,但可以等待 ...
2021年安全员-B证（广西省-2021版）找解析及安全员-B证（广西省-2021版）试题及解析
题库来源:安全生产模拟考试一点通公众号小程序安全员-B证(广西省-2021版)找解析是由公众号安全生产模拟考试一点通提供,安全员-B证(广西省-2021版)证模拟考试题库是根据安全员-B证(广西省- ...
2021年前端面试题总结
2021年前端面试题总结 1.git 命令 $ git init //在目录中创建新的Git仓库 $ git status //查看仓库状态 $ git add //提交到暂存区 $ git comm ...
2021前端面试题系列：fetch与axios、浏览器内多个标签页面通信及安全问题
大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:fetch与axios.浏览器内标签页之间的通讯方法.XSS 和CSRF以及如何防范,此方面内容在我们的工作中常用到, 也是 ...
2021前端面试题系列：HTTP请求和HTTP缓存控制
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求和HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文 ...
西邮 Linux 兴趣小组 2021 纳新试题
1. 请试着解释其输出 int main(int argc , char *argv[]) {unsigned char a = 255;char ch = 128;a -= ch;printf(&q ...
农行2021计算机专业面试题,2021年农业银行面试备考：半结构化往年面试题（五）...
广东银行招聘网整理了银行结构化面试历年试题集,考生可以查阅学习,为即将到来的面试做足准备! 2021农业银行面试备考:半结构化往年面试题(五) 你的简历中提到,你曾在学生会工作过,请谈谈你在学生会工作 ...
农行2021计算机专业面试题,2021农业银行总行笔试试题答案（考生回忆）-行测
原标题:2021农业银行总行笔试试题答案(考生回忆)-行测 2021农业银行总行笔试与9月13日进行,中公金融人为大家提供了农业银行总行笔试行测试题的答案,方便大家提前了解笔试成绩,做好后期的笔试备考 ...
2021软件测试面试题汇总【备战金九银十】内容较长建议收藏
一.面试基础题简述测试流程: 1.阅读相关技术文档(如产品PRD.UI设计.产品流程图等). 2.参加需求评审会议. 3.根据最终确定的需求文档编写测试计划. 4.编写测试用例(等价类划分法.边界值 ...

2021 肯特面试题2