【前端面试3+1】04浏览器存储、flex布局&属性和常用指令、 promise和async await区别

一、浏览器存储

1.1类型：

浏览器数据存储的方式有以下几种：

• Cookie：小型文本文件，存储在用户计算机上，可以通过浏览器传输到服务器。
• Web Storage：包括LocalStorage和SessionStorage，可以在浏览器端本地存储数据。
• IndexedDB：浏览器端的数据库，可以存储大量结构化数据。
• Cache API：用于存储缓存数据，可以提高网站性能。

1.2.这4种的区别;

	Cookie	Web Storage	IndexedDB	Cache API
存储位置	存储在客户端，每次请求都会将Cookie发送给服务器	存储在客户端，不会随每次请求发送给服务器	存储在客户端，不会随每次请求发送给服务器	存储在客户端，可以缓存网络请求结果、页面资源等
存储容量	通常限制在4KB	5MB左右	相对较大，可以存储大量数据	根据浏览器设置和硬件限制
生命周期	可以设置过期时间，可以长期存储	LocalStorage数据永久保存，除非用户清除浏览器数据； SessionStorage数据在会话结束时被清除（关闭标签页或浏览器）	数据永久保存，除非用户清除浏览器数据	根据缓存策略设置，可以是临时的或持久的
使用场景	适合存储少量数据，如用户认证信息、用户偏好设置等	适合存储大量结构化数据，如离线应用、复杂数据操作等	适合存储大量结构化数据，如离线应用、复杂数据操作等	适合提高网站性能，减少网络请求次数，加快页面加载速度

1.3 LocalStorage和SessionStorage的区别

（1）作用域：

• LocalStorage：数据存储在浏览器本地，除非主动清除，否则数据永久保存，即使关闭浏览器也不会丢失。
• SessionStorage：数据也存储在浏览器本地，但在当前会话结束（关闭标签页或浏览器）时会被清除，数据不会长期保留。

（2）数据共享：

• LocalStorage：存储的数据在同一浏览器的同一域下共享，即使打开多个相同域名的标签页也可以共享数据。
• SessionStorage：存储的数据在同一浏览器的同一标签页下共享，不同标签页之间的数据不共享。。

（3）生命周期：

• LocalStorage：数据永久保存，除非主动清除。
• SessionStorage：数据在当前会话结束时被清除。

（4）使用场景：

• LocalStorage：适合存储持久性数据，如用户偏好设置、本地缓存等。
• SessionStorage：适合存储会话期间需要使用的临时数据，如表单数据、页面状态等。

 二、flex布局、属性和常用指令

1.定义：

        Flex布局是一种用于设计和排列元素的现代CSS布局方式，它使用弹性盒子模型来实现灵活的布局。

2.常用的Flex布局属性:

• 容器属性：

  • display: flex;：定义一个弹性容器。
  • flex-direction: row | row-reverse | column | column-reverse;：设置主轴的方向。
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：沿主轴对齐方式。
  • align-items: flex-start | flex-end | center | baseline | stretch;：沿交叉轴对齐方式。
  • flex-wrap: nowrap | wrap | wrap-reverse;：定义是否换行。

• 项目属性：

  • flex-grow: <number>;：定义项目的放大比例。
  • flex-shrink: <number>;：定义项目的缩小比例。
  • flex-basis: <length> | auto;：定义项目的初始大小。
  • flex: <flex-grow> <flex-shrink> <flex-basis>;：简写形式。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;：单独设置项目在交叉轴上的对齐方式。

3.常用指令：

• justify-content：定义了项目在主轴上的对齐方式。
• align-items：定义了项目在交叉轴上的对齐方式。
• flex：用于设置项目的放大比例、缩小比例和初始大小。
• flex-direction：定义了主轴的方向。
• flex-wrap：定义了项目在主轴上是否换行。

4.flex=1 的含义：

        在Flex布局中，设置`flex: 1;`的含义是将一个弹性项目的伸缩因子（flex-grow）设置为1，这意味着该项目会占据剩余空间的所有可用空间。

        简单来说，设置`flex: 1;`可以让一个项目占据弹性容器中剩余空间的所有可用空间，使得布局更加灵活和自适应。这在构建响应式布局或者需要弹性伸缩的布局中非常有用。

三、 promise和async await区别

	Promise	async/await
语法	使用 .then() 和 .catch() 方法来处理异步操作的结果和错误	使用 async 和 await 关键字来处理异步操作，使得代码看起来更像同步代码。
特点	Promise 是一种基于回调的异步编程解决方案，通过链式调用 .then() 方法可以处理多个异步操作。	async 函数返回一个 Promise，await 关键字可以暂停 async 函数的执行，等待 Promise 解决。
优点	相对于回调函数，Promise 更容易管理和组织异步代码，避免了回调地狱。	代码结构清晰，易于阅读和维护，避免了回调地狱。
缺点	可能会出现回调地狱，需要多次嵌套 Promise。	不能在顶层作用域使用 await，需要在 async 函数内部使用。

总结：

• Promise 是一种基于回调的异步编程解决方案，适合处理多个异步操作。
• async/await 是基于 Promise 的语法糖，使得异步代码更加清晰易读，适合处理单个异步操作或者多个依赖的异步操作。