Javascript Web Storage and APIs with syntax and examples

Web Storage:

- Web Storage allows web applications to store data locally within the user's browser.
- Web Storage provides two mechanisms for storing data: localStorage and sessionStorage.
- Data stored in localStorage persists even after the browser is closed, while data stored in sessionStorage is deleted when the browser is closed.

Web Storage Syntax:

- Setting an item:
    - localStorage.setItem('key', 'value');
    - sessionStorage.setItem('key', 'value');
- Getting an item:
    - localStorage.getItem('key');
    - sessionStorage.getItem('key');
- Removing an item:
    - localStorage.removeItem('key');
    - sessionStorage.removeItem('key');
- Clearing storage:
    - localStorage.clear();
    - sessionStorage.clear();

Examples:

- Web Storage:


// Setting an item
localStorage.setItem('name', 'John');

// Getting an item
const name = localStorage.getItem('name');
console.log(name); // Output: John

// Removing an item
localStorage.removeItem('name');

// Clearing storage
localStorage.clear();


APIs (Application Programming Interfaces):

- APIs allow web applications to communicate with external services.
- APIs provide a set of defined rules that enable different applications to communicate with each other.
- APIs can be used to retrieve or send data to external services.

API Syntax:

- Fetch API:
    - fetch('(link unavailable)')
        - .then((response) => response.json())
        - .then((data) => console.log(data))
        - .catch((error) => console.error(error))

Examples:

- APIs:


// Fetch API
fetch('(link unavailable)')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));

// Using async/await
async function fetchData() {
    try {
        const response = await fetch('(link unavailable)');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();


By mastering web storage and APIs, you will be able to store data locally within the user's browser and communicate with external services. Remember to practice and experiment with different examples to solidify your understanding.

Next Topic:

- Module 8: Advanced Web Development Concepts

In this module, we will explore advanced web development concepts such as web performance optimization, accessibility, and security. We will learn how to optimize web applications for better performance, make web applications accessible to all users, and secure web applications from common threats.