这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战
一、本地存储
1.1 为什么要本地存储？
真实项目中经常需要在一个网站的多个页面间共享数据，如果登录状态，购物车信息等
但是浏览器打开页面时首先形成一个顶层的作用域window，每次页面打开都会形成一个单独的作用域，页面之间是不可以互通访问变量的；但是项目中经常会用到页面间传递数据的要求；
每个页面又都是在浏览器中打开的，如果可以把值存储到浏览器中，让浏览器作为一个中介， A页面把值存到浏览器中，B页面从从浏览器中把A存储的值取出来；
1.2 本地存储解决方案：
- cookie
- localStorage
- sessionStorage
1.3 localStorage 和 sessionStorage
HTML5提供了本地存储方式：
- localStorage 永久存储（如果手动触发删除或者用户清除）
- sessionStorage 会话存储
1.3.1 localStorage
window.localStorage 对象
console.log(window.localStorage);
- localStorage.setItem(key, value) 存储数据
- localStorage 存储数据时键值的形式存储的；
- key 键
- value 值
- key和value都需要是字符串类型，如果不是字符串类型，浏览器会隐式调用toString将其转换为字符串；
localStorage.setItem({name: 1}, {name: 2});
localStorage.setItem(1, 2)
- 如果不会有两个相同的key，如果key相同后面的值会覆盖前面的值；
localStorage.setItem('user', 'q1');
localStorage.setItem('user', 'q12');
- 如果批量存储数据太麻烦，直接存储JSON字符串
let ary = {
code: 0,
data: {
page: 1,
limit: 10,
list: [
{
course: 18,
subject: 15,
fire: 3,
price: 180
},
{
course: 18,
subject: 15,
fire: 3,
price: 180
},
{
course: 18,
subject: 15,
fire: 3,
price: 180
},
{
course: 18,
subject: 15,
fire: 3,
price: 180
}
]
},
msg: 'ok'
};
localStorage.setItem('someJson', JSON.stringify(ary));
- localStorage.getItem(key) 获取ls中存储的数据。
获取回来的都是字符串类型的
let json = localStorage.getItem('someJson');
let uk = localStorage.getItem('uk'); null
console.log(uk); 获取不存在的key返回null
console.log(json);
console.log(typeof json); string
localStorage.removeItem(key) 删除
localStorage.removeItem('user');
1.3.2 sessionStorage 会话存储，
-
setItem(key, value)
-
getItem(key)
-
removeItem(key)
-
sessionStorage.setItem('ok', '0');
-
localStorage和sessionStorage的区别：
localStorage是永久存储，如果不删除或者用户不清除就会一直有。而sessionStorage只是会话存储，只要页面不关闭有，如果页面关闭了，就消失了。
二、发布网站
-
项目： 前后端开发的项目代码
-
域名： 需要在万网（被阿里云收购）上买域名，每个域名项身份证号一样，是不会重复的，一旦被注册，就不能再次进行购买；
-
服务器： 存储项目代码的一台电脑。每个服务器都会对应一个对应的ip地址（一个门牌号），如果想让我们开发的项目代码为用户提供服务需要把项目代码部署在服务器上(虚拟服务器)。
-
DNS (Domain Name System)： DNS服务由DNS服务器提供，DNS服务是将域名和IP地址进行绑定；
-
ftp(file transfer protocol)上传: ftp工具或者脚本把代码上传到服务器上；
-
端口： 一个服务器可以提供多个服务，每个服务器上可以有很多小房间（端口），这些小房间编号0-65535，每个端口可以提供一个服务；
+webstorm的localhost:63342/xxx/ccc.html 是在本机上启动了一个服务器程序，此时我们的电脑相当于服务器。我自己的电脑上访问localhost:xxx/cc.html时是不需要网络的
- 搜索爬虫：每个做搜索的，公司如百度，都会有一个用来收集各大网站的程序，这个程序称为搜索爬虫。它会把最火的关键词或者网站上的关键字收录到自己的搜索库中；当我们进到百度时，查找某些东西时，百度的服务器会去自己的搜索库中和我们输入的内容最接近的内容，然后返回给我们
三、http协议
3.1 什么是http协议？
http(HyperText Transfer Protocol): 超文本传输协议：在客户端和服务器端不仅可以进行文本传输，还可以传递图片，音视频；是浏览器和服务器端之间约定好了的一种规范；双方按照规范传递和接受数据；
- https: 加密的传输协议；更安全，在协议中增加了秘钥，不容易被拦截和篡改，大多数对安全有要求的都会使用https；
http: 就像运行在客户端和服务端的快递小哥，可以把客户端的信息传递给服务器（请求: request），然后把服务器整理好的数据通过http协议发送给服务端（响应response）;
3.2 前后端交互模型
- 在浏览器总输入一个url，到用户看到页面都经过了什么？
3.2.1 http 请求阶段
- 浏览器得到地址栏中的地址，发送给DNS服务器
- DNS服务器进行域名解析，找到域名对应的IP地址
- 把客户端的请求发送给上一步查出来的服务器地址
3.2.2 http 响应阶段
- 服务器接收到请求后，根据请求的信息，进行资源的整理，并且把响应的资源通过http返回给客户端（数据或者html、js、css文件等）；
- 根据资源的类型不同，浏览器会进行不同的操作，如html和css进行解析渲染，js进行解析并执行；
3.2.3 浏览器的渲染阶段
- 解析html文件形成DOM树根据节点间关系组织树的节点关系；
- 解析CSS形成CSS树
- 把DOM树和CSS树组合形成render树
- 接下来交给显卡，绘制成页面；
四、http的三次握手和四次挥手
http 协议建立和断开连接时不是一次就完成的，连接时而是通过三次握手，断开时要经历4次挥手；
4.1 三次握手
-
第一次握手：客户端发送syn码数据包给服务器，客户端要求和服务器建立连接；
-
第二次握手：服务端接收到连接请求后，会发送ack码数据到客户端，表示你的连接请求已经收到，再次询问客户端是否确认建立连接
-
第三次握手：客户端收到服务器的ack码后，检验是否正确，如果正确则再次发送ack给服务器，表示确认连接；
-
三次握手如果成功，客户端和服务端的连接成功建立，才会开始传递数据；
4.2 四次挥手：
- 当客户端发送数据结束后，会发送fin告知服务器，客户端要给服务器的数据传输完了；
- 服务端返回给客户端一个ack码，告知客户端已经知道数据传递完成。客户端收到ack，就会把发送到服务端的通道关闭；
- 服务端数据传输结束后，也会发送fin给客户端；
- 当客户端收到fin后，会发送ack给服务端，表示客户端知道服务端已经发送完毕，服务器收到ack后就可以放心的关闭数据传输通道；
五、uri/urn/url
- URI: 统一资源标识符
- URN: 同一资源成名
- URL: 同一资源定位符；
5.1 url各部分代表的意义
一个url的例子：
https://www.dahai.com:443/tech/ai.html?user=q1&time=1e8239473784#top
url各部分代表的意义:
- http http/https: 协议
- www.dahai.com 域名
- :443 端口号 http 协议默认80,https默认443
- /tech/ai.html 路径
- ?user=q1&time=2323456 参数（可以有可以没有）放在?后面的都是告知服务器的数据
- #top 锚点：（哈希）
六、HTTP报文
6.1 http报文是什么？
HTTP报文用于http协议交互的信息，因为http通信分为请求和响应两个阶段，所以报文分为两种；
- 请求报文
- 响应报文
6.2 报文的结构：
报文分为：报文首部 空行 报文主体；
6.2.1 请求报文：
报文首部：请求首部分为请求行和请求头；请求行中包含 请求方法、协议、版本、URI 空行（CR+LF） 报文主体：客户端传递给服务端的数据
6.2.2 响应报文：
报文首部：状态行和响应头；状态行包含http协议版本，响应状态码 空行（CR+LF） 报文主体：响应体（服务端返回给客户端的数据）
