LocalStorage API Documentation

Overview

The LocalStorage API provides a way to store key-value pairs in the browser. Data persists even after the browser window is closed and reopened.

Key Methods

1. Setting Items

// Store a single item
localStorage.setItem('username', 'John');
 
// Store an object
const user = {
  name: 'John',
  age: 30,
  email: '[email protected]'
};
localStorage.setItem('user', JSON.stringify(user));

//tumhare case mei input lene ke liye 
  <input type="text" class="title" onchange="handleTitle(this.value)" placeholder="Enter Title">
  <input type="text" class="task" onchange="handleTask(this.value)" placeholder="Enter Task">
  <button onclick="handleClick()">Submit</button>
 
 
 <script>
  let title;
  let task;

  function handleTitle(event) {
    title = event;
  }

  function handleTask(event) {
    task = event; 
  }

  function handleClick() {
    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {
      localStorage.setItem(String(title), String(task));
      console.log(localStorage.getItem(title)); 
    } else {
      console.log('localStorage is not available in this environment.');
    }
  }
</script>
 

2. Getting Items

// Get a single item
const username = localStorage.getItem('username');
console.log(username); // Output: "John"

// Get and parse an object
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: "John"

3. Removing Items

// Remove a single item
localStorage.removeItem('username');

// Clear all items in localStorage
localStorage.clear();

4. Check Storage Length

// Get number of items in localStorage
const itemCount = localStorage.length;
console.log(itemCount);

Important Notes

Error Handling

try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('LocalStorage is full');
  }
}