HTML APIs Guide: Web Storage, Media & Drag and Drop Explained

HTML APIs: Storage, Media & Drag and Drop

Understand HTML Canvas and SVG with clear examples. Learn differences, use cases, performance tips and when to use Canvas or SVG in real projects.

Modern websites sirf static pages nahi hoti. Browsers khud powerful features dete hain jo directly HTML ke saath kaam karte hain.

In this post, you will learn about important HTML-powered browser APIs that are widely used in real-world web applications.

These APIs help you build:

Offline-ready websites
Media-rich applications
Interactive user experiences

What You Will Learn

Web Storage API (localStorage & sessionStorage)
HTML Media API (audio & video control)
Drag and Drop API
Real-world use cases

Web Storage API (localStorage & sessionStorage)

Web Storage API allows websites to store data inside the browser. This data remains even after page reload.

localStorage

Data stored in localStorage does not expire unless manually cleared.


localStorage.setItem("theme", "dark");
localStorage.getItem("theme");

Common use cases:

Theme preference (dark/light)
User settings
Cart data

sessionStorage

sessionStorage works only for the current browser tab. Once the tab is closed, data is removed.


sessionStorage.setItem("step", "2");

Info!
Web Storage stores only strings. Objects must be converted using JSON.

HTML Media API (Audio & Video)

HTML5 provides built-in support for audio and video playback. You can control media using JavaScript.

Basic video example:

<video id="myVideo" width="300" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById("myVideo");
video.volume = 0.5;
</script>

Using Media API, you can:

Play / pause media
Control volume
Track progress

Drag and Drop API (HTML5)

The Drag and Drop API allows users to move elements using mouse interaction. This feature is commonly used in:

File upload interfaces
Dashboard widgets
Kanban boards (like Trello)
Reordering lists

HTML5 provides built-in support for drag and drop without any external library.

Core Concepts of Drag and Drop

draggable="true" → makes an element draggable
dragstart → fires when dragging begins
dragover → fires when dragged item is over a drop zone
drop → fires when item is dropped

Info!
Drag and Drop works only with mouse interaction. It is not touch-friendly by default.

Live Example: Drag Box Into Drop Area

Edit the code below and click Run to see how drag and drop works.

<style>
.drag-box{
  width:140px;
  padding:12px;
  background:#22c55e;
  color:#fff;
  text-align:center;
  cursor:grab;
  border-radius:6px;
  font-weight:600;
}

.drop-zone{
  margin-top:24px;
  height:90px;
  border:2px dashed #999;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-weight:600;
}
</style>

<div id="box" class="drag-box" draggable="true">
  Drag Me
</div>

<div id="target" class="drop-zone">
  Drop Here
</div>

<script>
const box = document.getElementById("box");
const target = document.getElementById("target");

// When drag starts
box.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "dragging");
});

// Allow drop
target.addEventListener("dragover", (e) => {
  e.preventDefault();
});

// Handle drop
target.addEventListener("drop", () => {
  target.style.background = "#dcfce7";
  target.style.borderColor = "#22c55e";
  target.innerHTML = "Dropped Successfully!";
});
</script>

Step-by-Step Explanation

draggable="true" enables dragging on the element
dragstart event fires when user starts dragging
dataTransfer carries drag data internally
dragover must call preventDefault() to allow drop
drop handles what happens after dropping

Without preventDefault(), the drop event will never fire.

Warning!
Many beginners forget dragover + preventDefault(). This is the #1 reason drag and drop does not work.

Real-World Use Case

Drag and Drop is commonly used for:

Uploading files by dragging
Reordering tasks
Moving cards between columns

Most modern libraries (React, Vue, Angular) internally rely on the same concepts.

Accessibility & Performance Notes

Not fully accessible for keyboard users
Should always have a fallback UI
Use sparingly for important actions

Warning!
Never rely only on Drag and Drop for critical actions like form submission.

Key Takeaways

Drag and Drop is part of HTML5
Requires draggable, dragover and drop events
Used heavily in dashboards and tools
Needs accessibility fallback

Success! You now understand how Drag and Drop works at a real-world level.

This API is used in:

Kanban boards
File upload UIs
Custom editors

Best Practices

Do not store sensitive data in localStorage
Always provide fallback for media
Keep drag-and-drop interactions simple
Test APIs on multiple browsers

Common Mistakes

Using localStorage as a database
Ignoring accessibility for drag actions
Autoplaying media without user action

What You Learned

How Web Storage works
How to control audio and video
How Drag and Drop API works
Real-world HTML API usage

🎉 Great job!
You’ve successfully completed Beginner Post #9. Consistency is what turns beginners into pros. Practice daily, then move ahead with confidence.

Next Beginner Post

🚀 Level Up: Next HTML Lesson: HTML Architecture & Scaling →

Maxoncodes