珠峰培训，专注前端

一、本地存储

为什么要本地存储？

  • 真实项目中经常需要在一个网站的多个页面间共享数据，如果登录状态，购物车信息等

但是浏览器打开页面时首先形成一个顶层的作用域 window，每次页面打开都会形成一个单独的作用域，页面之间是不可以互通访问变量的；但是项目中经常会用到页面间传递数据的要求；

每个页面又都是在浏览器中打开的，如果可以把值存储到浏览器中，让浏览器作为一个中介， A页面把值存到浏览器中，B页面从从浏览器中把A存储的值取出来；

本地存储解决方案：

  • cookie
  • localStorage
  • sessionStorage

localStorage 和 sessionStorage

HTML5提供了本地存储方式：

  • localStorage 永久存储（如果手动触发删除或者用户清除）
  • sessionStorage 会话存储

localStorage

  1. window.localStorage 对象
  2. console.log(window.localStorage);

  • localStorage.setItem(key, value) 存储数据

  • localStorage 存储数据时键值的形式存储的；

  • key 键
  • value 值
  • key 和 value 都需要是字符串类型，如果不是字符串类型，浏览器会隐式调用 toString 将其转换为字符串；
  1. localStorage.setItem({name: 1}, {name: 2});
  2. localStorage.setItem(1, 2)
  • 不会有两个相同的 key，如果 key 相同后面的值会覆盖前面的值；
  1. localStorage.setItem('user', 'mabin');
  2. localStorage.setItem('user', 'mabin2');
  • 如果批量存储数据太麻烦，直接存储 JSON 字符串
  1. let ary = {
  2.     code: 0,
  3.     data: {
  4.         page: 1,
  5.         limit: 10,
  6.         list: [
  7.             {
  8.                 course: 18,
  9.                 subject: 15,
  10.                 fire: 3,
  11.                 price: 180
  12.             },
  13.             {
  14.                 course: 18,
  15.                 subject: 15,
  16.                 fire: 3,
  17.                 price: 180
  18.             },
  19.             {
  20.                 course: 18,
  21.                 subject: 15,
  22.                 fire: 3,
  23.                 price: 180
  24.             },
  25.             {
  26.                 course: 18,
  27.                 subject: 15,
  28.                 fire: 3,
  29.                 price: 180
  30.             }
  31.         ]
  32.     },
  33.     msg: 'ok'
  34. };
  36. localStorage.setItem('someJson', JSON.stringify(ary));
  • localStorage.getItem(key) 获取 ls 中存储的数据。

获取回来的都是字符串类型的

  1. let json = localStorage.getItem('someJson');
  2. let uk = localStorage.getItem('uk'); // null
  3. console.log(uk); // 获取不存在的 key 返回 null
  4. console.log(json);
  5. console.log(typeof json); // string
  7. localStorage.removeItem(key) // 删除
  8. localStorage.removeItem('user');
  • 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 协议

什么是 http 协议？

http(HyperText Transfer Protocol):
超文本传输协议：在客户端和服务器端不仅可以进行文本传输，还可以传递图片，音视频；是浏览器和服务器端之间约定好了的一种规范；双方按照规范传递和接受数据；

  • https: 加密的传输协议；更安全，在协议中增加了秘钥，不容易被拦截和篡改，大多数对安全有要求的都会使用 https；

http: 就像运行在客户端和服务端的快递小哥，可以把客户端的信息传递给服务器（请求: request），然后把服务器整理好的数据通过 http 协议发送给服务端（响应response）;

前后端交互模型

  • 在浏览器中输入一个 url，到用户看到页面都经过了什么？

  • http 请求阶段

  1. 浏览器得到地址栏中的地址，发送给DNS服务器
  2. DNS服务器进行域名解析，找到域名对应的IP地址
  3. 把客户端的请求发送给上一步查出来的服务器地址
  • http 响应阶段
  1. 服务器接收到请求后，根据请求的信息，进行资源的整理，并且把响应的资源通过http返回给客户端（数据或者html、js、css文件等）
  2. 根据资源的类型不同，浏览器会进行不同的操作，如 html 和 css 进行解析渲染，js进行解析并执行
  • 浏览器的渲染阶段
  1. 解析 html 文件形成 DOM 树根据节点间关系组织树的节点关系；
  2. 解析 CSS 形成 CSS 树
  3. 把 DOM 树和 CSS 树组合形成 render 树
  4. 接下来交给显卡，绘制成页面

四、http的三次握手和四次挥手

http 协议建立和断开连接时不是一次就完成的，连接时而是通过三次握手，断开时要经历四次挥手；

  • 三次握手

  • 第一次握手：客户端发送 syn 码数据包给服务器，客户端要求和服务器建立连接；

  • 第二次握手：服务端接收到连接请求后，会发送 ack 码数据到客户端，表示你的连接请求已经收到，再次询问客户端是否确认建立连接
  • 第三次握手：客户端收到服务器的 ack 码后，检验是否正确，如果正确则再次发送 ack 给服务器，表示确认连接；

  • 三次握手如果成功，客户端和服务端的连接成功建立，才会开始传递数据；

  • 四次挥手：

  1. 当客户端发送数据结束后，会发送 fin 告知服务器，客户端要给服务器的数据传输完了；
  2. 服务端返回给客户端一个 ack 码，告知客户端已经知道数据传递完成。客户端收到 ack，就会把发送到服务端的通道关闭；
  3. 服务端数据传输结束后，也会发送 fin 给客户端；
  4. 当客户端收到 fin 后，会发送 ack 给服务端，表示客户端知道服务端已经发送完毕，服务器收到 ack 后就可以放心的关闭数据传输通道；

五、uri/urn/url

  • URI: 统一资源标识符；
  • URN: 统一资源名称；
  • URL: 统一资源定位符；
  • 一个 url 的例子：
  1. https://www.dahai.com:443/tech/ai.html?user=mabin&time=1e8239473784#top

url 各部分代表的意义:

  1. http http/https: 协议
  2. www.dahai.com 域名
  3. :443 端口号 http 协议默认80,https 默认443
  4. /tech/ai.html 路径
  5. ?user=mabin&time=2323456 参数（可以有可以没有）放在?后面的都是告知服务器的数据

  6. top 锚点：（哈希）

六、HTTP报文

http 报文是什么？

HTTP 报文用于 http 协议交互的信息，因为 http 通信分为请求和响应两个阶段，所以报文分为两种；
请求报文和响应报文

报文的结构：

报文分为：报文首部 空行 报文主体；

请求报文：

  1. 报文首部：请求首部分为请求行和请求头；请求行中包含 请求方法、协议、版本、URI
  2. 空行（CR+LF）
  3. 报文主体：客户端传递给服务端的数据

响应报文：

  1. 报文首部：状态行和响应头；状态行包含 http 协议版本，响应状态码
  2. 空行（CR+LF）
  3. 报文主体：响应体（服务端返回给客户端的数据）

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】