× Full Screen Image

BOM

The BOM (Browser Object Model) lets JavaScript talk to the browser itself — not the page content, but the browser window around it. It gives you access to things like the URL, screen size, browser history, and storage.

The BOM is not part of the JavaScript language standard, but all modern browsers support it. The top-level object of the BOM is window.

javascript

// The window object is the global object in browsers
console.log(window); // shows all browser properties and methods

// Global variables and functions become properties of window
var name = "Alice";
console.log(window.name); // Output: Alice

The window object is the root of the BOM. It represents the browser tab. Common properties and methods include innerWidth, innerHeight, alert(), confirm(), setTimeout(), and setInterval().

javascript

// Viewport size
console.log(window.innerWidth);  // e.g. 1440
console.log(window.innerHeight); // e.g. 900

// Open a popup
window.alert("Hello!");

// Run code after a delay (milliseconds)
window.setTimeout(function () {
  console.log("1 second later");
}, 1000);

// Run code repeatedly
const id = window.setInterval(function () {
  console.log("every 2 seconds");
}, 2000);

// Stop the interval
window.clearInterval(id);

window.history gives access to the browser's session history — the list of pages the user has visited in the current tab. You can navigate back and forward without a page reload.

javascript

// Go back one page (same as clicking the Back button)
history.back();

// Go forward one page
history.forward();

// Go a specific number of steps (-2 = two pages back)
history.go(-2);

// Total number of entries in the history stack
console.log(history.length);

window.navigator contains information about the user's browser and device. It is commonly used to detect the browser, language, and whether the user is online.

javascript

// Browser and OS info
console.log(navigator.userAgent);
// e.g. "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."

// User's preferred language
console.log(navigator.language); // e.g. "en-US"

// Check if online
console.log(navigator.onLine); // true or false

// Check for cookies being enabled
console.log(navigator.cookieEnabled); // true or false

window.screen gives information about the user's physical screen (monitor). This is different from the browser viewport size (window.innerWidth).

javascript

// Full screen resolution
console.log(screen.width);  // e.g. 1920
console.log(screen.height); // e.g. 1080

// Available area (excluding OS taskbar)
console.log(screen.availWidth);
console.log(screen.availHeight);

// Color depth in bits
console.log(screen.colorDepth); // e.g. 24

window.location holds the current page URL and lets you navigate to a new URL from JavaScript.

javascript

// Full URL
console.log(location.href);
// e.g. "https://example.com/page?q=hello#section"

// Just the domain
console.log(location.hostname); // e.g. "example.com"

// Path after the domain
console.log(location.pathname); // e.g. "/page"

// Query string
console.log(location.search); // e.g. "?q=hello"

// Hash fragment
console.log(location.hash); // e.g. "#section"

// Navigate to a new page
location.href = "https://example.com";

// Reload the current page
location.reload();

Cookies are small text values stored in the browser and sent to the server with every request. They are often used for sessions, authentication, and tracking. You read and write cookies through document.cookie.

javascript

// Set a cookie (expires in 7 days)
document.cookie = "username=Alice; expires=Fri, 31 Dec 2025 23:59:59 UTC; path=/";

// Read all cookies (one string)
console.log(document.cookie);
// e.g. "username=Alice; theme=dark"

// Delete a cookie by setting an expired date
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Cookies have a size limit of about 4 KB and are sent to the server on every request. For client-only storage, prefer localStorage or sessionStorage.

localStorage lets you store key-value pairs in the browser with no expiry. Data stays even after the tab or browser is closed. It can store up to about 5 MB per origin.

javascript

// Save a value
localStorage.setItem("theme", "dark");

// Read a value
const theme = localStorage.getItem("theme");
console.log(theme); // Output: dark

// Remove one item
localStorage.removeItem("theme");

// Clear everything
localStorage.clear();

// Storing objects (must convert to JSON string)
const user = { name: "Alice", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// Reading back an object
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name); // Output: Alice

sessionStorage works exactly like localStorage but data is cleared when the tab is closed. It is useful for temporary data that should not persist between browser sessions.

javascript

// Save a value for the session
sessionStorage.setItem("step", "2");

// Read the value
console.log(sessionStorage.getItem("step")); // Output: 2

// Remove it
sessionStorage.removeItem("step");

// Data is automatically gone when the tab closes

Key difference: localStorage data persists forever (until cleared), while sessionStorage data is lost when the tab is closed.

  • The BOM lets JavaScript interact with the browser beyond the page content.
  • window is the global object and the root of the BOM.
  • history lets you navigate back and forward in the session history.
  • navigator provides information about the browser and device.
  • screen gives the physical screen dimensions.
  • location holds the current URL and lets you navigate to another page.
  • Cookies are small browser-stored values sent to the server with each request.
  • localStorage stores data permanently (until cleared) in the browser.
  • sessionStorage stores data only for the current tab session.
Previous
Next