[summary of front-end knowledge points] WebAPI BOM & localStorage

Five objects of BOM

Window object: current browser window

1 . window object characteristics

  1. Window is the top-level object in JavaScript. All global functions and global objects are the methods of window objects
    • For example, document, alert(), setInterval(), setTimeout(), and so on
  2. The member of the window object (attribute + method), which can be omitted when used
  3. The window object has a special attribute called top, which points to the window object itself.
    • Details: the variable name top cannot be overwritten. Even if you declare top yourself, it still points to window.
      • So when we declare variables, we'd better not call them top. It is better to prefix the declared variables and use hump naming
      //The top variable cannot be declared. It must point to window
      console.log(top) // Window {}

2 . Two common methods of window object

window. Open: open the window

Four parameters

  • Parameter 1 (string type) url: the url path to open
  • Parameter 2 (String type) target: equivalent to target of a tag:_ self
    • The default value is: target:_blank
  • Parameter 3 (String type) features: new window features (size, position, etc.), used to open the window in the window
    • The values are: 'left=200px,top=200px,width=300px,height=300px'
  • Parameter 4 (boolean type) replace: whether to replace the current history

window.close() closes the window

  document.querySelector('.close').onclick = function () {

3 . window object events

window.onload event: execute after the page dom tree + external resources are loaded

  • Note: if the js code is written above the body, the dom element cannot be obtained Because the code is parsed from top to bottom, if js is written above the body, the elements in the body will not be rendered when parsing js code
  • Application: window The onload event allows your js to get page elements anywhere
    // Register window Onload event
      window.onload = function () {
        console.log('page dom tree + External resources loaded')
        let box = document.querySelector('.box')
    <div class="box">I am div</div>

window.onbeforeunload event: execute before closing the page

  • Application: store some important data
      window.onbeforeunload = function(){
          console.log('Execute before closing the page')

window.onunload event: page closing

      window.onunload = function(){
          console.log('Page closing')

location object: Web address bar (url)

The address bar object stores all the data in the address bar

1 . Common properties of location object

location.href: full URL

  • js jump to web page: it is implemented by modifying the href attribute of the location object
  • location.href = 'http://www.juejin.cn'

location.host: host name (domain name)

location.search: network parameters

location.hash: anchor location

  • Resource locator: allows you to scroll your web page to the location of the executing element

2 . Method of location object

location. Assign ('url '): jump to the web page (you can go back)

  • location.assign('http://www.juejin.cn')
  • Equivalent expression: location href = 'url'

location. Replace ('url '): replace a web page (cannot be rolled back)

  • location.replace('http://www.baidu.com')
    location.reload(): refresh the page
  • Call the method to achieve the web page refresh effect location reload()

history object: history

Common methods of history object

  • history.back(): back to the previous page
  • history.forward(): advance to the next page
  • history. Go (number):
    • Positive number: forward a few pages of history Go (2): forward 2 pages
    • 0: refresh
    • Negative: back a few pages of history Go (- 2): back 2 pages

navigator object: browser user information

Browser model version, user operating system information

Common properties of navigator object

  • navigator.userAgent string type: user agent gets specific details
  • Application: user data collection

5 . screen object: computer screen resolution (not commonly used)

localStorage and sessionStorage


1 . localStorage function: local storage

  • Classic scenario: login free
    2 . localStorage syntax:
  • 2.1 stored data: localstorage Setitem ('property name ', property value)
  • 2.2 data retrieval: localstorage Getitem ('property name ')
  • 2.3 delete data: localstorage Removeitem ('property name ')
  • 2.4 clear data: localstorage clear()

3 . localStorage features:

  • 3.1 localStorage is a permanent storage, which will always exist unless manually cleared.
  • 3.2 localStorage can only store string type data. If it is another type, it will be automatically converted to character format storage.


1 . sessionStorage function: temporary storage

  • Classic scenario: value transfer between pages

2 . sessionStorage syntax is exactly the same as localStorage:

  • 2.1 stored data: sessionstorage Setitem ('property name ', property value)
  • 2.2 data retrieval: sessionstorage Getitem ('property name ')
  • 2.3 delete data: sessionstorage Removeitem ('property name ')
  • 2.4 clear data: sessionstorage clear()

3 . sessionStorage features:

  • 3.1 the sessionstorage page is automatically cleared after it is closed.
  • 3.2 sessionStorage can only store string type data. If it is another type, it will be automatically converted to character format storage.

Similarities and differences between localStorage and sessionStorage:

The same point: the functions are the same, and they all store data
Differences: different storage methods

  • localStorage: hard disk storage
  • sessionStorage: memory storage

How localStorage stores other types of data:

localStorage uses JSON format for storage

  • Save: convert to json format string to store json stringify(js)
  • Fetch: take out the JSON format and turn it into a js object JSON parse(json)

Classic application cases of localStorage and sessionStorage

Sessionstorage classic scenario: transferring values between pages

Ideas for transferring values between sessionstorage pages:

  1. When clicking button on the next page of the value transfer page: first save the data into sessionStorage
  2. The value of the previous page in sessionStorage is read on reception
  3. Render the page and send it to the server
    Value transfer page code:
    <input class="username" type="text" placeholder="Please enter your account number" />
    <br />
    <input class="password" type="text" placeholder="Please enter your password" />
    <br />
    <!-- js Inline -->
      onclick=" location.href='./Receive page.html' "
      next page
      document.querySelector('button').addEventListener('click', function () {
        //When clicking the next page: first save the data into sessionStorage

Receiving page code:

    <input class="name" type="text" placeholder="Please enter your name" />
    <br />
    <input class="age" type="text" placeholder="Please enter age" />
    <br />
    <input class="address" type="text" placeholder="Please enter the shipping address" />
    <br />

      document.querySelector('button').onclick = function () {
        //1. First read the form value of this page
        let name = document.querySelector('.name').value
        let age = document.querySelector('.age').value
        let address = document.querySelector('.address').value
        //2. Read the value of the previous page in sessionStorage
        let username = sessionStorage.getItem('username')
        let password = sessionStorage.getItem('password')
        //3. Send the two page data to the server together
        console.log(name, age, address, username, password)

localStorage classic scenario: login free

Ideas for other types of localStorage storage:

  1. Save: convert js objects into json format for storage
  2. Fetch: fetch json format data first
  3. Convert the retrieved json into a js object
      let js = { name: 'Zhang San', age: 18, eat: [1, 2, 3] }
      // 1. Deposit  
      //(1) Convert js to json (2) store json format
      localStorage.setItem('user', JSON.stringify(js) )
      // 2. Take 
      //   let jsonData = localStorage.getItem('user')
      // 3. Convert to js object
      //   let jsData = JSON.parse( jsonData )
      // (1) Take out the json format data (2) and turn it into a js object
      let jsData = JSON.parse( localStorage.getItem('user') )

Keywords: Javascript Front-end

Added by maverickminds on Sat, 05 Mar 2022 00:44:49 +0200