JavaScript BOM (Browser Object Model) Cheat Sheet

This page provides a concise and comprehensive cheat sheet about BOM (Browser Object Model) in modern JavaScript (ES6 and newer). You can bookmark it for quick lookups in the future.

Window object

The Window object represents the browser window that your script is running in. It is the top-level object of the BOM.

// Accessing the window object
let windowObj = window;

// Accessing the global object
let globalObj = windowObj;

// Accessing the current document
let currentDoc = windowObj.document;

// Accessing the current location
let currentLocation = windowObj.location;

// Opening a new window
let newWindow = windowObj.open(url, windowName, features, replace);

// Closing the current window
windowObj.close();

Location object

The Location object represents the current URL of the browser window.

// Accessing the location object
let locationObj = location;

// Getting the current URL
let currentUrl = locationObj.href;

// Changing the URL
locationObj.href = newUrl;
locationObj.assign(newUrl);

// Reloading the current page
locationObj.reload();

// Navigating to the previous page in history
history.back();

// Navigating to the next page in history
history.forward();

History object

The History object represents the browser’s session history, which is the list of pages that the user has visited in the current browser window.

// Accessing the history object
let historyObj = history;

// Getting the number of pages in history
let pagesInHistory = historyObj.length;

// Navigating to a specific page in history
historyObj.go(delta);

// Adding a new entry to history
historyObj.pushState(stateObj, title, url);

// Modifying the current entry in history
historyObj.replaceState(stateObj, title, url);

// Listening for changes to the history
window.addEventListener('popstate', event => {
  let stateObj = event.state;
  // Handle the state change
});

Navigator object

The Navigator object represents the browser application itself and provides information about the browser’s features and capabilities.

// Accessing the navigator object
let navigatorObj = navigator;

// Checking if cookies are enabled
let cookiesEnabled = navigatorObj.cookieEnabled;

// Checking if the browser is online
let isOnline = navigatorObj.onLine;

// Checking the browser's platform
let platform = navigatorObj.platform;

// Checking the browser's user agent string
let userAgent = navigatorObj.userAgent;

// Checking the browser's language
let language = navigatorObj.language;

Screen object

The Screen object represents the user’s screen or monitor and provides information about its size and resolution.

// Accessing the screen object
let screenObj = screen;

// Getting the screen width and height
let screenWidth = screenObj.width;
let screenHeight = screenObj.height;

// Getting the screen available width and height
let screenAvailableWidth = screenObj.availWidth;
let screenAvailableHeight = screenObj.availHeight;

// Getting the screen pixel depth
let screenPixelDepth = screenObj.pixelDepth;

Timers

The two timer methods of the window object for scheduling code to run at a later time: setTimeout() and setInterval().

// Scheduling a function to run after a delay
let timeoutId = setTimeout(callback, delay);

// Cancelling a timeout
clearTimeout(timeoutId);

// Scheduling a function to run repeatedly at a fixed interval
let intervalId = setInterval(callback, interval);

// Cancelling an interval
clearInterval(intervalId);

localStorage & sessionStorage

localStorage and sessionStorage are part of the Browser Object Model. They allow you to store data in the browser using key-value pairs. They are similar in syntax and functionality, but they differ in how long they persist the data.

localStorage stores data with no expiration date. The data is not deleted when the browser is closed and is available for future sessions. localStorage is useful for storing user preferences or settings for a web application.

sessionStorage stores data only for one session. The data is deleted when the page session ends — that is when the page is closed. sessionStorage is useful for storing temporary data that does not need to be persisted across multiple pages or visits.

// Add an item to localStorage
localStorage.setItem("myKey", "myValue");

// Retrieve an item from localStorage
const myValue = localStorage.getItem("myKey");
console.log(myValue);

// Remove an item from localStorage
localStorage.removeItem("myKey");

// Clear all items from localStorage
localStorage.clear();

// Add an item to sessionStorage
sessionStorage.setItem("myKey", "myValue");

// Retrieve an item from sessionStorage
const myValue = sessionStorage.getItem("myKey");
console.log(myValue);

// Remove an item from sessionStorage
sessionStorage.removeItem("myKey");

// Clear all items from sessionStorage
sessionStorage.clear();

Closing Thoughts

This cheat sheet covers a wide range of features and use cases related to BOM in modern JavaScript. I also use it frequently in my work. If you want to see more specific examples and detailed instructions, continue reading other articles on Sling Academy.