localStorage

The localStorage object allows you to store key-value pairs in the user's browser. These data persist even after the browser is closed and reopened. It is ideal for storing persistent data like user preferences, shopping cart items, or application settings.

// Store data
localStorage.setItem('name', 'John Doe');

// Retrieve data
let name = localStorage.getItem('name');
console.log(name); // Output: John Doe

// Remove data
localStorage.removeItem('name');

sessionStorage

Similar to localStorage, sessionStorage stores key-value pairs but only for the duration of the user's session. Once the browser tab or window is closed, the data is cleared. It is useful for temporary data like user input or shopping cart items during a single session.

// Store data
sessionStorage.setItem('cart', 'Apple, Banana');

// Retrieve data
let cart = sessionStorage.getItem('cart');
console.log(cart); // Output: Apple, Banana

// Remove data
sessionStorage.removeItem('cart');

Cookies

Cookies are small text files sent by a web server and stored on the user's computer. They are often used to remember user preferences, track website traffic, and maintain user sessions. Cookies can be accessed by both the server and the client-side JavaScript.

// Set a cookie
document.cookie = 'username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';

// Retrieve a cookie
let cookieArray = document.cookie.split('; ');
for (let i = 0; i < cookieArray.length; i++) {
  let cookie = cookieArray[i].split('=');
  if (cookie[0] === 'username') {
    console.log(cookie[1]); // Output: John Doe
  }
}

WebSQL

WebSQL is a deprecated API that allowed web applications to store structured data in a relational database on the user's device. It was intended to be a lightweight database solution for web apps but was eventually replaced by IndexDB.

IndexDB

IndexDB is a client-side database API that allows web applications to store large amounts of structured data in a key-value store format. It offers features like indexing, transactions, and efficient data retrieval. IndexDB is a good alternative to WebSQL for storing persistent data in web applications.

// Open a database
let request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Database error:', event.target.error);
};

request.onsuccess = function(event) {
  let db = event.target.result;
  // Perform operations with the database
};

Geolocation

The Geolocation API allows web applications to access the user's geographical location. This can be used for various purposes, such as providing location-based services, displaying nearby businesses, or tracking user movement.

// Get user's location
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  alert('Geolocation is not supported by this browser.');
}

Summary

• localStorage: Persistent storage for user preferences and application settings.
• sessionStorage: Temporary storage for session-specific data.
• Cookies: Small text files for remembering user preferences, tracking website traffic, and maintaining user sessions.
• WebSQL: A deprecated API for storing structured data in a relational database on the user's device.
• IndexDB: A client-side database API for storing large amounts of structured data in a key-value store format.
• Geolocation: API to access the user's geographical location for location-based services and user tracking.