Five objects of BOM
Window object: current browser window
1 . window object characteristics
- 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
- The member of the window object (attribute + method), which can be omitted when used
- 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
- Details: the variable name top cannot be overwritten. Even if you declare top yourself, it still points to window.
//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.open('http://www.juejin.cn','_blank','left=200px,top=200px,width=300px,height=300px')
window.close() closes the window
document.querySelector('.close').onclick = function () {
window.close()
}
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
<head>
<script>
// Register window Onload event
window.onload = function () {
console.log('page dom tree + External resources loaded')
let box = document.querySelector('.box')
console.log(box)
}
</script>
</head>
<body>
<div class="box">I am div</div>
</body>
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
localStorage
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.
sessionStorage
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:
- When clicking button on the next page of the value transfer page: first save the data into sessionStorage
- The value of the previous page in sessionStorage is read on reception
- Render the page and send it to the server
Value transfer page code:
<body>
<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 -->
<button
onclick=" location.href='./Receive page.html' "
>
next page
</button>
<script>
document.querySelector('button').addEventListener('click', function () {
//When clicking the next page: first save the data into sessionStorage
sessionStorage.setItem(
'username',
document.querySelector('.username').value
)
sessionStorage.setItem(
'password',
document.querySelector('.password').value
)
})
Receiving page code:
<body>
<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 />
<button>register</button>
<script>
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:
- Save: convert js objects into json format for storage
- Fetch: fetch json format data first
- 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') )
console.log(jsData)