This is the 18th day of my participation in the August Challenge

Local storage

1.1 Why Local Storage?

Real projects often need to share data across multiple pages of a website, such as login status, shopping cart information, etc

However, when the browser opens the page, it first forms a top-level scope window. Every time the page is opened, a separate scope will be formed. But the requirement to pass data between pages is often used in projects;

Each page is opened in the browser, if you can store the value in the browser, let the browser as an intermediary, A page to store the value in the browser, B page from the browser to take out the value stored in A;

1.2 Local Storage Solution:

  • cookie
  • localStorage
  • sessionStorage

1.3 localStorage and sessionStorage

HTML5 provides local storage:

  • LocalStorage Permanent storage (if manually triggered deletion or user cleanup)
  • SessionStorage sessionStorage

1.3.1 localStorage

windowThe localStorage objectconsole.log(window.localStorage);
Copy the code
  • Localstorage. setItem(key, value) stores data
  • LocalStorage stores data in the form of key values;
  • The key key
  • The value value
  • Both the key and value need to be strings. If they are not, the browser implicitly calls toString to convert them to strings.
localStorage.setItem({name: 1}, {name: 2});
localStorage.setItem(1.2)

Copy the code
  • If there can’t be two keys of the same type, if the keys are the same, the latter value overwrites the previous value;
localStorage.setItem('user'.'q1');
localStorage.setItem('user'.'q12');
Copy the code
  • If storing data in batches is too cumbersome, store JSON strings
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));
Copy the code
  • Localstorage. getItem(key) Obtains data stored in ls.

Everything that comes back is a string

let json = localStorage.getItem('someJson');
let uk = localStorage.getItem('uk'); null
console.log(uk); Returns a key that does not existnull
console.log(json);
console.log(typeof json); string

localStorageDelete. RemoveItem (key)localStorage.removeItem('user');
Copy the code

1.3.2 sessionStorage,

  • setItem(key, value)

  • getItem(key)

  • removeItem(key)

  • sessionStorage.setItem(‘ok’, ‘0’);

  • LocalStorage and sessionStorage

LocalStorage is a permanent storage. If the storage is not deleted or the user does not delete it, it will remain there forever. SessionStorage is only sessionStorage, as long as the page is not closed, if the page is closed, it will disappear.

Second, publish the website

  • Project:

Front and back end development of the project code

  • Domain name:

Need to buy domain name in Wanwang (ali Cloud acquisition), each domain name id number is the same, is not repeated, once registered, can not be purchased again;

  • Server:

A computer that stores the project code. Each server will have a corresponding IP address (a house number), if we want to develop the project code to provide services to users need to deploy the project code on the server (virtual server).

  • Domain Name System (DNS) :

The DNS service is provided by the DNS server. The DNS service binds a domain name to an IP address.

  • File Transfer Protocol (FTP) upload: The FTP tool or script uploads the code to the server.

  • Port:

A server can provide multiple services, each server can have many small rooms (port), these small rooms numbered from 0 to 65535, each port can provide one service;

+ webstorm localhost: 63342 / XXX/CCC. HTML is launched a server program in the unit, when our computer is equivalent to the server. I don’t need a network to access localhost: XXX /cc.html on my own computer

  • Search crawler: every search company, such as Baidu, will have a program to collect major websites, this program is called search crawler. It collects the most popular keywords or keywords from websites into its search library; When we go to Baidu and look for something, baidu’s servers will go to their search library and give us the content that is closest to what we typed in

HTTP protocol

3.1 What is HTTP?

HyperText Transfer Protocol (HTTP): The client and server can Transfer not only text, but also pictures, audio and video. Is a specification agreed upon between the browser and the server side; Both parties shall transmit and receive data in accordance with the specifications;

  • HTTPS: encrypted transport protocol; More secure, add a secret key in the protocol, not easy to intercept and tamper with, most security requirements will use HTTPS;

HTTP: just like running on the client and the server, the Courier can transfer the client information to the server (request: Request), and then send the data sorted out by the server to the server through HTTP protocol (response);

3.2 Front and back end interaction model

  • What happens when you enter a URL in the browser until the user sees the page?

3.2.1 HTTP Request Phase

  1. The browser gets the address in the address bar and sends it to the DNS server
  2. The DNS server resolves the domain name and finds the CORRESPONDING IP address
  3. Send the client request to the server address identified in the previous step

3.2.2 HTTP Response Phase

  1. After receiving the request, the server collates the resources according to the request information and returns the resources to the client through HTTP (data or HTML, JS, CSS files, etc.).
  2. According to different types of resources, browsers will carry out different operations, such as HTML and CSS parsing rendering, JS parsing and execution;

3.2.3 Browser rendering phase

  1. DOM tree is formed by parsing HTML files to organize the node relations of the tree according to the relationship between nodes.
  2. Parse the CSS to form a CSS tree
  3. Combine the DOM tree with the CSS tree to form the Render tree
  4. Next to the graphics card, drawn into a page;

4. HTTP three handshakes and four waves

The establishment and disconnection of HTTP protocol is not completed in one time, but through three handshakes, disconnection through four waves;

4.1 Three handshakes

  • First handshake: The client sends a SYN packet to the server and establishes a connection with the server.

  • Second handshake: After receiving the connection request, the server sends ack code data to the client, indicating that the connection request has been received and asking the client again whether to confirm the connection

  • Third handshake: After receiving the ACK code from the server, the client checks whether the ack code is correct. If the ACK code is correct, the client sends another ACK to the server to confirm the connection.

  • If the three-way handshake succeeds, the connection between the client and the server is established successfully, and data is transferred.

4.2 Four Waves:

  1. When the client finishes sending data, the FIN notifies the server that the data to be sent from the client to the server is finished.
  2. The server returns an ACK code to inform the client that the data transfer is complete. When the client receives an ACK, the channel sent to the server is closed.
  3. After data transmission is complete, the server sends the FIN to the client.
  4. After receiving the FIN, the client sends an ACK to the server, indicating that the client knows that the server has completed sending the ACK. After receiving the ACK, the server can safely close the data transmission channel.

Five, the uri/urn/url

  • URI: Uniform resource Identifier (URI)
  • URN: Name of the same resource
  • URL: same resource locator;

5.1 Meaning of each PART of URL

An example url:

https://www.dahai.com:443/tech/ai.html?user=q1&time=1e8239473784#top
Copy the code

What the parts of the URL represent:

  1. HTTP/HTTPS: HTTP protocol
  2. The domain name www.dahai.com
  3. The default HTTP port number is 80, and the default HTTPS port number is 443
  4. Path/tech/ai. HTML
  5. ? User =q1&time=2323456 The rest is the data that informs the server
  6. #top anchor point :(hash)

HTTP packets

6.1 What Is an HTTP Packet?

HTTP packets are used for HTTP communication. HTTP communication is divided into request and response phases. Therefore, packets are divided into two types.

  • The request message
  • The response message

6.2 Packet Structure:

Packets are divided into: blank line header packet body;

6.2.1 Request Packets:

Packet header: The request header is divided into request line and request header. Request line contains request method, protocol, version, URI Blank line (CR+LF) Message body: data transmitted from the client to the server

6.2.2 Response Message:

Message header: status line and response header; The status line contains the HTTP version, and the response status code is blank (CR+LF). Packet body: response body (data returned by the server to the client)