HTML5 APIs

Unlock advanced browser capabilities to build interactive, high-performance web applications.

`Web Storage API`

Web Storage allows web applications to store up to 5MB of data locally within the user's browser, which is much more efficient than cookies.

LocalStorage : Stores data with no expiration date; the data remains even after the browser is closed.
SessionStorage : Stores data for one session only; data is lost when the tab or window is closed.
Offline & caching concepts : Using technologies like Service Workers to store site assets locally so the app works without internet.

Web Storage API

Click Save to store a name, then Load to retrieve it. Data stays even after page refresh.

<button onclick="save()">Save</button>
<button onclick="load()">Load</button>
<p id="out"></p>

<script>
  function save() {
    localStorage.setItem('name', 'Ali');
    document.getElementById('out').textContent = 'Saved!';
  }
  function load() {
    var name = localStorage.getItem('name');
    document.getElementById('out').textContent = name ? 'Name: ' + name : 'Nothing saved yet.';
  }
</script>

`User Interaction & Context`

These APIs allow the browser to interact with the physical world and provide a desktop-like experience.

Drag & Drop API : Allows users to click and drag elements across the page to perform actions.
Geolocation API : Enables the browser to share the user's location (latitude and longitude) with their consent.
History API : Allows developers to modify the browser's session history (the back/forward buttons) and URL without refreshing.

Drag and Drop API

Drag the box into the drop zone. Three events handle the full drag-and-drop flow.

<div draggable="true" id="box" ondragstart="event.dataTransfer.setData('id','box')"
  style="display:inline-block;padding:8px 16px;background:#60a5fa;border-radius:6px;cursor:grab">
  Drag Me
</div>

<div ondragover="event.preventDefault()"
     ondrop="event.preventDefault(); this.appendChild(document.getElementById(event.dataTransfer.getData('id')))"
  style="height:100px;border:2px dashed #94a3b8;margin-top:16px;display:grid;place-items:center;">
  Drop Here
</div>

Geolocation API

Get the user's GPS coordinates. Browser asks for permission before sharing location.

<button onclick="getLocation()">Get My Location</button>
<p id="out"></p>

<script>
  function getLocation() {
    document.getElementById('out').textContent = 'Fetching...';
    navigator.geolocation.getCurrentPosition(
      function(p) {
        document.getElementById('out').textContent =
          'Lat: ' + p.coords.latitude + ', Lon: ' + p.coords.longitude;
      },
      function(err) {
        document.getElementById('out').textContent = 'Error: ' + err.message;
      }
    );
  }
</script>

`Background Processing`

Modern web apps often need to do heavy calculations. HTML5 provides a way to do this without freezing the user interface.

Web Workers : Scripts that run in a background thread, separate from the main execution thread of a web application.
Main Thread : The primary place where the browser processes UI and user interactions; keeping it clear ensures a smooth experience.
PostMessage : The method used for the main page and the Web Worker to communicate with each other safely.

Knowledge Check

1. Which storage type persists even after the browser is closed and reopened?

2. What does the Geolocation API require before it can access a user's location?

3. Which API allows you to run JavaScript in the background without affecting page performance?

4. How does SessionStorage differ from LocalStorage?

5. Which API allows you to manipulate the browser URL and navigation history without a full page reload?

6. What is a key concept of 'Offline' web apps in HTML5?

Previous Next