今日收获总结（前端常见面试题1）

一.Cookie、LocalStorage和SessionStorage的区别

共同点：都是存储在浏览器本地的；三者都遵循同源规则，Session还要求同一页面

区别：

1.cookie是由服务器写入，Session和Local都是前端写入

2.有效时间：cookie是自己设置的可以一直保存，Local可以持久存储数据，除非自己删除；

Session当浏览器关闭的时候信息就删除

3.大小：cookie 4kb左右；Session和Local比较大是在5M左右

4.使用场景：Cookie用于存储登陆验证信息；Local用于存储不易改变的数据，减轻服务器的压力；Session验证用户是否关闭或者刷新页面

如何实现可过期的localstorage数据

localstorage只能用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。要清除过期的缓存，有两种方法：

惰性删除
惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。实现方法是，存储的数据类型是个对象，该对象有两个key，一个是要存储的value值，另一个是当前时间。获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。

定时删除
每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程，获取所有设置过期时间的key判断是否过期，过期就存储到数组中，遍历数组，每隔1S（固定时间）删除5个（固定个数），直到把数组中的key从localstorage中全部删除。
 

token能放在cookie中吗？

token一般是用来判断用户是否登录的，它内部的信息有uid（用户唯一的身份标识）、time（当前时间的时间戳）、sign（签名）；token可以放在cookie中，token是否过期，应该由后端来判断，不该由前端来判断，所以token存储在cookie中不设置过期时间就可以了，如果token失效，就让后端在接口中返回固定的状态表示token失效，需要重新登录，在重新登陆的时候，重新设置cookie中的token就行了。

二.JS的数据类型

基本数据类型（Number、String、Boolean、Undefined、Null、BigInt（Es6新出，数据范围大）、Symbol（Es6新出，独一无二可作为key））

引用数据类型：正则、函数、Date、数组、普通对象 （都用Object表示）

区别：基本数据类型占用空间小，直接存储在栈中的简单数据段，属于被频繁使用的数据；

引用数据类型存储在堆中，占据空间大，其在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找值时，就会检索其在栈中的地址，取得地址后从堆中取得实体。

三.闭包

函数嵌套函数，内部函数就是闭包

原理：作用域链，通过作用域可以访问上级作用域的变量。

正常情况下，函数执行完，内部变量就被销毁，从而释放内存空间；闭包能解决的是能够让函数作用域中的变量在函数执行之后不销毁，同时在函数外部可以访问函数内部里的局部变量。闭包的问题：由于垃圾回收器不会将闭包内变量销毁就容易造成内存泄露，从而导致内存溢出。

 四.什么是跨域？怎么解决？

当前页面中的某个接口与当前页面的地址在协议、域名或端口其中有一项不同。

原因是：浏览器为了网页安全出的同源策略。

解决：

cors：设置后端允许跨域实现

node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理都是将请求发给代理服务器，静态页面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器之间不存在同源限制。

Jsonp：利用script可以跨越请求资源，将回调函数作为参数拼到url中，后端收到请求，调用该回调函数并将数据作为参数返回去，设置响应表头为Js。

Postmessage：H5新增API，通过发送和接收API实现跨域通信。

加分场景：前后端分离式开发，调用第三方接口。

五.BFC

这是W3C css2.1中的一个规范，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。一个页面由多个Box组成，元素的display属性和类型决定了这个Box的类型。

不同的Box会参加不同的Formatting Context（决定如何渲染文档的容器）。因此Box内的元素会以不同的方式渲染，也就是BFC内部元素与外部元素不相互影响。