Web-big

01、从输入URL到浏览器显示页面发生了什么

发生的事情

1、浏览器查看缓存，有的话直接显示页面，没有的话执行下面的任务 2、DNS解析域名 3、TCP三次握手 4、浏览器发出请求 5、服务器处理请求并返回页面信息 6、浏览器解析渲染

相关链接 1、百度-面试官：浏览器输入url到页面显示发生了什么？ 2、CSDN-从输入url 到浏览器显示页面发生了什么

02、GET请求与POST请求有什么区别

区别

1、GET请求参数是放在head中，可以在url中看到。POST请求参数放在body中，在url中不可见。 2、GET请求参数需要使用encodeURIComponent进行编码，必须用&符隔开。 3、GET请求的url有长度限制，而POST请求不用考虑请求参数的长度。 4、GET请求产生一个数据包，POST请求产生两个数据包。 5、GET请求会被浏览器主动缓存下来，留下历史记录，而POST默认不会。

相关链接 1、掘金-都2020年了，还理不清GET请求和POST请求区别？ 2、掘金-HTTP中GET和POST两种基本请求方法的区别

03、HTTP状态码

常见状态码

200、203、400、404、500等。

更多状态码相关链接 1、百度百科-HTTP状态码

04、请描述一下cookies、sessionStorage、localStorage、IndexDB和WebSQL的区别

1、cookies 存储大小

4KB，纯文本格式，超过被忽略，所以很少被用于存储客户端数据

存储时间

可以设置过期时间，expires选项 会话期cookie浏览器关闭自动清除 持久性cookie设置过期时间，到期后清除

可以和服务器对话

在我们请求服务器的时候，服务器可能会给我们返回cookie 我们在请求服务器的时候也会带上cookie 一般检查是否登录是看cookie

可以保存的内容

key/vaule:cookie都是以key/value的形式存在 expires:cookie的最长有效时间，如果没有表示这是一个会话期cookie httpOnly: 设置了HttpOnly属性的cookie不能使用JavaScript读取 还有一些其他可选项… … 设置cookie，一次只能设置一个cookie

设置cookie

// 可选的配置 document.cookie = "name=yangfeng"; document.cookie = 'test=hello world'; 

获取cookie

const allCookies = document.cookie; console.log(allCookies); 

删除cookie

// 设置它的expires属性为一个过去的日期 document.cookie = 'name=banchen;expires=Thu, 01-Jan-1970 00:00:01 GMT'; 

2、sessionStorage 存储大小

2.5M~10M

存储时间

页面会话期可用，关闭浏览器消失 页面刷新和恢复也可用 打开多个相同url的tab页面，会创建各自的session，即不可相互访问 使用location.href或者window.open来打开另一个同域页面是可以访问，前提是先操作session再打开才会有 清除缓存也会消失

不可以和服务器对话

可以保存任意内容

键值存储，类似于对象，整数自动转化为字符串 所以存储前可以先使用JSON.stringify()进行转换

设置sessionStorage

window.sessionStorage['name'] = 'yangfeng'; window.sessionStorage.age = 18; window.sessionStorage.setItem('key', 'value'); 

获取sessionStorage

sessionStorage.getItem("name"); sessionStorage.name

删除sessionStorage

// 删除某个sessionStorage sessionStorage.removeItem('key'); delete sessionStorage.name; // 清除所以数据 sessionStorage.clear(); 

3、localStorage 存储大小

2.5M~10M

存储时间

永久保存 手动清除或者清除缓存

不可以和服务器对话

可以保存任意内容

键值存储，类似于对象，整数自动转化为字符串 所以存储前可以先使用JSON.stringify()进行转换

localStorage满了的情况下仍继续存储并不会覆盖其他的值，而是直接报错(QuotaExceededError) ，当前存储的值会被清空

一个页面操作了localStorage同源的页面都可以访问和操作

可以监听同源localStorage的修改（不监听本页面的操作）

window.addEventListener('storage', function(val) { console.log('val: ', val); }); 

设置localStorage

window.localStorage['name'] = 'yangfeng'; window.localStorage.age = 18; window.localStorage.setItem('key', 'value'); 

获取localStorage

localStorage.getItem("name"); localStorage.name; 

删除localStorage

// 删除某个localStorage localStorage.removeItem('key'); delete localStorage.name; // 清除所以数据 localStorage.clear(); 

4、indexedDB 存储大小

大于250M

存储时间

手动更新或删除

不可以和服务器对话

详细介绍

5、WebSQL

不推荐使用，不详细介绍。

05、跨域

定义

1、浏览器同源（origin）策略：浏览器规定发送ajax请求时，只有相同域名的客户端和相同域名的服务端才能发送请求。 2、同源：.html在哪台服务器请求，数据也需要在哪台服务器请求。 3、报错：Access-Control-Allow-Origin不允许跨源头发送请求。 4、同源策略的本质：可以发送ajax请求，可以正常执行服务端的程序，也可以顺利返回正确的结果，但是，浏览器经过检查数据的来源，如果和当前网页的来源不一致，浏览器禁止使用此数据。

跨域的四种情况

域名不同 www.a.com www.b.com 端口号不同 www.a.com:3000 www.a.com:5500 协议不同 http://www.a.com https://www.a.com 域名和地址相互请求 http://localhost http://127.0.0.1

可以跨域的标签

1、img 2、link 3、iframe 4、script

解决跨域的方法

暂无

原文链接 1、CORS和JSONP

06、持久化

使用本地存储，保存登录信息。后端设置的登录信息存在过期问题，此时前端就需要根据后端返回的过期信息实现登录持久化。首先需要了解后端返回的过期时间信息设置前端重新请求登录信息的时间，一般重新请求时间要早于过期时间，这样才能无缝连接的更新登录信息，并且实现持久化。