Comprehensive Web API & JavaScript Environment Documentation

Detailed guide covering execution contexts, Web APIs, and the Browser Object Model. Includes examples and MDN references.

1. JavaScript Execution Contexts

Call Stack

The call stack is a LIFO (last in, first out) data structure that manages execution contexts created during a program's run. Each time a function is invoked, a new execution context is created and placed on the call stack. 

    // Example: Simple Call Stack
    function first() {
    second();
    console.log('Returning to first');
    }
    
    function second() {
    third();
    console.log('Returning to second');
    }
    
    function third() {
    console.log('In third function');
    }
    
    first();

MDN: Call Stack

Global Execution Context

The global execution context is the default context where the JavaScript code runs. It creates a global object (window in browsers) and defines the outer scope. 

    console.log(window); // In browsers, window is the global object.

MDN: Execution Context

Functional Execution Context

Every time a function is invoked, a new execution context is created for that function. This context includes its own variable environment, scope chain, and a reference to the global object. 

    function greet(name) {
    let greeting = 'Hello, ' + name;
    return greeting;
    }
    console.log(greet('World'));

2. The Location Object

location.href

location.href returns the full URL of the current page. It can also be used to redirect the browser. 

    console.log(window.location.href); // Get current URL
    // Redirect to a new URL:
    window.location.href = 'https://www.example.com';

MDN: location.href

location.reload()

The location.reload() method reloads the current URL. Passing true forces a reload from the server. 

    // Simple reload
    location.reload();
    
    // Force reload from server
    location.reload(true);

MDN: location.reload()

Other Location Methods

  • location.assign(url): Loads the document at the new URL.
  • location.replace(url): Replaces the current document with the new one without saving the current page in session history. 
    // Example using assign():
    location.assign("https://www.example.com");
    
    // Example using replace():
    location.replace("https://www.example.com");

MDN: The Location interface

3. The History Object

Methods

  • history.back(): Navigates to the previous page in session history.
  • history.forward(): Navigates to the next page in session history.
  • history.go(n): Loads a specific page in the session history relative to the current page (negative numbers go backward, positive go forward). 
    // Navigate back:
    history.back();
    
    // Navigate forward:
    history.forward();
    
    // Navigate two pages back:
    history.go(-2);

MDN: History

5. Local Storage

Overview and Methods

The localStorage object allows you to store key/value pairs in a web browser. Data stored here persists even when the browser is closed.

  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()
  • Access: localStorage.user can be used as a shortcut to store user data if you choose to define it.
    // Storing data
    localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));
    
    // Retrieving data
    const user = JSON.parse(localStorage.getItem('user'));
    console.log(user);
    
    // Removing data
    localStorage.removeItem('user');

MDN: localStorage

6. Browser Object Model (BOM)

The BOM represents objects provided by the browser (such as window, navigator, screen, and location) that enable interaction with the browser. It is not standardized like the DOM, but most browsers implement a similar set of objects. 

    // Accessing the BOM's window object
    console.log(window.innerWidth, window.innerHeight);

MDN: Browser Object Model

7. JSON API

JSON.stringify() & JSON.parse()

The JSON object provides methods to work with JSON data. JSON.stringify() converts JavaScript objects to a JSON string, whereas JSON.parse() converts a JSON string back into a JavaScript object. 

    // Convert an object to JSON
    const obj = { name: "Bob", age: 25 };
    const jsonString = JSON.stringify(obj);
    console.log(jsonString);
    
    // Convert JSON back to an object
    const parsedObj = JSON.parse(jsonString);
    console.log(parsedObj);

MDN: JSON.stringify() | MDN: JSON.parse()

8. Session & Session Storage

Session Storage

sessionStorage is similar to localStorage but the data persists only for the duration of the page session (until the browser or tab is closed).

  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()
    // Store session data
    sessionStorage.setItem('sessionName', 'SessionValue');
    
    // Retrieve session data
    const sessionData = sessionStorage.getItem('sessionName');
    console.log(sessionData);
    
    // Remove session data
    sessionStorage.removeItem('sessionName');

MDN: sessionStorage

Session (Server-Side Context)

While JavaScript in the browser does not manage server-side sessions directly, sessions are typically maintained on the server side (e.g., using cookies or tokens) and used in tandem with client-side storage.

9. Cookies

Using Document.cookie

Cookies are small pieces of data stored on the client side. They are accessed and set via document.cookie. Note that the cookie API is somewhat limited and manually parsing cookies is common. 

    // Set a cookie
    document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
    
    // Read cookies
    console.log(document.cookie);
    
    // Delete a cookie (set expiry date to the past)
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

MDN: Document.cookie