What is BOM?

BOM (Browser Object Model) is a browser object model that provides content-independent objects that interact with browser windows. Because BOM is mainly used to manage the communication between windows, the core object of BOM is window.

Relevant methods (attributes)

Popup

window.alert()

Properties of URL s

// Current HTML URL
location.href
//  https://www.baidu.com/lastpath/go?name=zhangshan&id=89785#index

// Query string section
location.search
// ?name=zhangshan&id=89785

// # The value after the number
location.hash
// #index

// domain name
location.host
// www.baidu.com

// Main domain name
location.hostname
// baidu.com

// The back part/path of the main domain name
location.pathname
// lastpath/go

// Port number
location.port
// 80 (default port number)

// Agreement part
location.protocal
// https:

// Load the specified URL
location.assign()

// Replace the specified URL, which is different from assgin and cannot be returned
location.replace()

// Refresh
location.reload()

history object

// Number of pages specified forward or backward
// Forward for positive and backward for negative
history.go()

// Back a page
history.back()

// One night ahead
history.forward()

Navigator object

// A string that returns the user agent header
navigator.userAgent

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

// Returns whether cookie s can be supported
navigator.cookieEnabled

// Return the browser name
navigator.appName // Chrome,IE

// Return to Browser Kernel
navigator.appCodeName // Mozilla

size

// Window Height of Browser
window.innerHeight
// Window Width of Browser
window.innerWidth

Be careful:
Views of browser windows do not include toolbars and scrollbars
That is to say, in full-screen mode, different browsers have different innerHeight and innerWidth due to different browser layout (toolbar, collection bar, search bar).

open

window.open(url, target, specs, replace)

• The path of the url to open the window

• target Opening Method

  • _ blank opens in a new window, defaulting to _blank
  • _ self opens in the original window, replacing the original window
  • _ Parent opens in the parent frame
  • name specifies that it opens in a window

• specs specify the style of the new window (use, connect)

  • width=pixels
  • height=pixels
• Whether replace replaces the current page in the history list

window.open('https://www.baidu.com', '_self', 'width=1920,height=1080')

Timer Event

window.setTimeout(fn, ms)
window.setInterval(fn, ms)

Cookies

Cookies are used to store user information on pages

What is Cookies

After the server sends the page to the browser, the connection between the server and the browser is disconnected, because the HTTP protocol is stateless, at this time, the server will not remember any information about the user.

Cookie can remember user information:

• When the user visits the page, his name is stored in Cookie.
• Cookie will remember her name the next time he visits the page

Storage mode

name = Kisn

When the browser sends a web page request to the server, the cookies corresponding to the page are added to the request so that the server can get the information needed to identify the user.

Method of manipulating cookies

JavaScript can use a document.cookie attribute to pierce, read, and delete cookies

// Establish
function setCookie(name, val, time) {
  var exp = new Date()

  exp.setTime(exp.getTime() + time)
  document.cookie = name + '=' + val + ';expires=' + exp.toGMTString()
}
// read
function getCookie(name) {
  let reg = new RegExp('(^| )' + name + '=([^;]*(;|$))')

  if ((res = document.cookie.match(reg))) {
    return unescape(res[2])
  } else {
    return false
  }
}

// delete

function delCookie(name) {
  let exp = new Date()
  exp.setTime = exp.getTime() - 1
  let cval = getCookie(name)
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}

Differences between Cookie and Session

http is a stateless protocol, so Cookie's greatest role is to store sessionId to identify users

Differences among Cookie, Session Storage and Local Storage

• Common ground

  • They are stored on the browser side and are homologous.

• Difference

  • Cookie:

    • Storage size: 4KB
    • Participate in server communication
    • As long as it is a homologous http request, cookies exist, that is, cookies are passed back and forth between browsers and servers, and they are effective. Cookies have the concept of a path, and we can limit cookies to only one path

  • sessionStorage:

    • Storage size: 5M
    • Not participating in server communication
    • Only valid during the current browser window (process) session, the data is not stored by the server request, and only used when requested.

  • localStorage:

    • Storage size: 5M
    • Not participating in server communication
    • It can be shared in the same source window, but it will always exist unless the data is cleared. Data is not stored by server requests, and only used when requested.

How Cookie Prevents XSS Attacks

What is XSS?

XSS is called cross-site scripting attack, which can be understood as injecting code into a web page in some way, while the browser can execute the code.
For example, a simple forum response can insert some HTML, CSS, JS, and get our Cookie.

We can configure it in the HTTP header to defend XSS from acquiring cookies.

set-cookie: httponly // Prohibit js scripts from accessing cookie s
set-cookie: secure // Send cookie s only when the request is https

screen

• Width of screen.width display
• Height of screen.height display
• Available Width of screen.availWidth
• Availability of screen.availHeight screen