BOM | Browser Storage ( Local Storage, Session Storage, Indexed DB )

Learning BOM | Browser Storage ( Local Storage, Session Storage, Indexed DB )

2 Likes

BOM:
BOM stands for Browser Object Model. It provides a way to interact with the web browser’s window and document objects, allowing you to manipulate the browser’s behavior and content.

Here are some important points about the BOM in JavaScript:

Window Object:
The window object represents the browser window or tab. It provides properties and methods for manipulating the browser’s dimensions, location, and history. You can access the window object using the window keyword.

The window object has several types of properties and methods:

Properties:

window.document: Represents the DOM (Document Object Model) document object for the current window.
window.location: Represents the URL of the current document and provides methods for navigating to different URLs.
window.navigator: Provides information about the user’s browser and operating system.
window.localStorage and window.sessionStorage: Provide mechanisms for storing data locally within the browser.
window.history: Provides methods for manipulating the browser’s history (e.g., navigating back and forth).
Methods:

window.alert(), window.confirm(), and window.prompt(): Display dialog boxes to the user for showing messages, confirming actions, and prompting for input.
window.setTimeout() and window.setInterval(): Schedule the execution of a function after a certain delay or at regular intervals.
window.open(): Opens a new browser window or tab.
window.close(): Closes the current browser window.

Document Object: The document object represents the HTML document loaded in the browser window. It provides properties and methods to access and manipulate the document’s elements, such as adding or modifying HTML content, handling events, and changing CSS styles. You can access the document object using the document keyword.The document object is part of the Document Object Model (DOM) API and allows you to access and modify elements, styles, events, and more within the web page.

The document object has several types of properties and methods:

Properties:

document.getElementById(): Retrieves an element in the document with the specified ID.
document.getElementsByClassName(): Retrieves a collection of elements in the document with the specified class name.
document.getElementsByTagName(): Retrieves a collection of elements in the document with the specified tag name.
document.querySelector(): Retrieves the first element that matches a CSS selector.
document.querySelectorAll(): Retrieves a list of all elements that match a CSS selector.
document.body: Represents the element of the document.
document.head: Represents the element of the document.
document.title: Gets or sets the title of the document.

Methods:

document.createElement(): Creates a new HTML element.
document.createTextNode(): Creates a new text node.
document.appendChild(): Appends a node as the last child of a parent node.
document.removeChild(): Removes a child node from its parent.
document.replaceChild(): Replaces one child node with another.
document.write(): Writes HTML content directly to the document.
document.addEventListener(): Registers an event handler for a specified event type.
document.removeEventListener(): Removes an event handler for a specified event type.

Navigator Object: The navigator object provides information about the browser’s name, version, and user agent. It allows you to detect the browser type and version, enabling you to implement browser-specific features or workarounds if needed.
The navigator object has several types of properties and methods:

Properties:

navigator.userAgent: Returns a string representing the user agent string of the browser.
navigator.appVersion: Returns a string representing the version information of the browser.
navigator.platform: Returns a string representing the operating system platform.
navigator.language: Returns a string representing the user’s preferred language.
navigator.cookieEnabled: Returns a boolean value indicating whether cookies are enabled in the browser.
navigator.onLine: Returns a boolean value indicating whether the browser is online or offline.
navigator.geolocation: Returns a Geolocation object that provides access to the user’s current location.

Methods:

navigator.getBattery(): Returns a promise that resolves to a BatteryManager object representing the device’s battery information.
navigator.vibrate(): Vibrates the device for a specified amount of time.
navigator.mediaDevices.getUserMedia(): Prompts the user for permission to use a media input device, such as a camera or microphone.
navigator.clipboard.writeText(): Writes text to the system clipboard.
navigator.sendBeacon(): Sends data to the server asynchronously using the HTTP POST method, designed for sending analytics or other data before a page is unloaded.

Location Object: The location object represents the URL of the current web page. It provides properties to access different parts of the URL, such as the hostname, pathname, search parameters, and hash. You can use the location object to manipulate the browser’s URL, navigate to a different page, or retrieve and set URL parameters.
The location object has several types of properties and methods:

Properties:

location.href: Gets or sets the complete URL of the current page.
location.host: Gets the hostname and port number of the current URL.
location.hostname: Gets the hostname of the current URL.
location.protocol: Gets the protocol of the current URL (e.g., “http:”, “https:”).
location.pathname: Gets the path and filename of the current URL.
location.search: Gets the query string portion of the current URL.
location.hash: Gets the fragment identifier (hash) portion of the current URL.

Methods:

location.assign(): Loads a new document by navigating to the specified URL.
location.replace(): Replaces the current document with a new one, without adding to the browser’s history.
location.reload(): Reloads the current document.
The location object allows you to manipulate the current URL, navigate to a different URL, and access different parts of the URL. For example, you can change the URL to load a new page, get the hostname or path of the current URL, or extract query parameters from the URL’s search string.

History Object: The history object allows you to manipulate the browser’s history, including adding or modifying entries and navigating between previously visited pages. It provides methods such as back(), forward(), and go() to navigate through the history stack.
The history object has several types of properties and methods:

Properties:

history.length: Returns the number of URLs in the history stack.
history.state: Returns the state object associated with the current history entry.

Methods:

history.back(): Loads the previous URL in the history stack.
history.forward(): Loads the next URL in the history stack.
history.go(): Loads a specific URL relative to the current position in the history stack. It accepts both positive and negative integers as arguments.
history.pushState(): Adds a new entry to the history stack with a specified state object and URL.
history.replaceState(): Modifies the current entry in the history stack with a specified state object and URL, without creating a new entry.
The history object allows you to navigate through the user’s browsing history, go back or forward to previously visited pages, and add or modify entries in the history stack using pushState() and replaceState(). The state object associated with each entry can contain custom data that can be accessed when the user navigates to a specific URL.

Screen Object: The screen object represents the user’s screen or monitor. It provides properties like width, height, color depth, and pixel density. You can use these properties to create responsive designs or adjust the layout based on the user’s screen resolution.
The screen object has several types of properties:

Properties:
screen.width: Returns the width of the screen in pixels.
screen.height: Returns the height of the screen in pixels.
screen.availWidth: Returns the available width of the screen (excluding taskbars and other system elements) in pixels.
screen.availHeight: Returns the available height of the screen (excluding taskbars and other system elements) in pixels.
screen.colorDepth: Returns the number of bits used to represent the color of each pixel on the screen.
screen.pixelDepth: Returns the total number of bits used to represent each pixel on the screen, including alpha channels.

4 Likes

@pathakdivya93 I learn a lot from your notes. :heart:

1 Like