window.md

The Browser Window Object

See also:

• The Document Object Model (DOM)
• The Document Object

Get current browser window dimensions:

window.innerHeight
window.innerWidth

Get information about the URL of the current page:

window.location
window.location.href
window.location.protocol
window.location.host
window.location.port
window.location.pathName
window.location.toString()

Storage

Reference: https://www.w3schools.com/html/html5_webstorage.asp.

The browser window object provides us with an ability to persist or save data for longer periods of time. In the case of "local storage", the data will persist without expiration, whereas in the case of "session storage", the data will expire when the user closes their browser tab.

We can access both the local storage and session storage as properties of the window object, or using shorthand that omits the reference to the window object:

window.localStorage //> Storage {length: 0}

// alternative syntax (without window object):
localStorage //> Storage {length: 0}

window.sessionStorage //> Storage {length: 0}

// alternative syntax (without window object):
sessionStorage //> Storage {length: 0}

Both these storage objects implement the same API, so we can treat them similarly, using similar methods and operations. In general, these storage objects behave similar to objects in the sense we can set and get values by referencing the corresponding key name.

In this example, we are saving a value to a particular storage location (for example called "userId"). Once set, we can get a value by referencing its key name:

localStorage.userId = "123456789"
localStorage //> Storage {userId: '123456789', length: 1}

localStorage.userId //> "123456789"

sessionStorage.userId = "123456789"
sessionStorage //> Storage {userId: '123456789', length: 1}

sessionStorage.userId //> "123456789"

We can programmatically clear the particular item from storage:

localStorage.removeItem("userId")
localStorage //> Storage {length: 0}

sessionStorage.removeItem("userId")
sessionStorage //> Storage {length: 0}

Finally, it is possible to clear all items from storage:

localStorage.clear()

sessionStorage.clear()

Prompts

See:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
• https://www.w3schools.com/jsref/met_win_prompt.asp

We can display a pop-up text box to ask for a user input, using the window object's prompt() method:

var name = window.prompt("Please enter your name...", "Harry Potter");

if (name != null) {
  console.log(name)
}

// alternative syntax (without window object):
var name = prompt("Please enter your name...", "Harry Potter");

if (name != null) {
  console.log(name)
}

Alerts

We can display a pop-up alert message box using the window object's alert() method:

window.alert("HELLO WORLD")

// alternative syntax (without window object):
alert("HELLO WORLD")

Timeouts

We can invoke a function after waiting for a specified duration of time, using the window object's setTimeout() method:

function doStuff() {
  console.log("PATIENTLY WAITING")
}

// invoke immediately:
doStuff()

// invoke after waiting 5 seconds:
window.setTimeout(doStuff, 5000)

// alternative syntax (without window object):
setTimeout(doStuff, 5000)

Intervals

We can invoke a function at specified intervals, using the window object's setInterval() method:

function doStuff() {
  console.log("DOING IT AND DOING IT AND DOING IT WELL")
}

// invoke once per second:
window.setInterval(doStuff, 1000)

// alternative syntax (without window object):
setInterval(doStuff, 1000)

To be able to programmatically also stop the intervals, we need to store the result in a variable that we later pass to the clearInterval() function:

function doStuff() {
  console.log("DOING IT AND DOING IT AND DOING IT WELL")
}

// invoke once per second:
var myInterval = window.setInterval(doStuff, 1000)

// stop invoking:
clearInterval(myInterval)