Curriculum
Local Storage and Session Storage in JavaScript are important Web Storage APIs used to store data directly in the browser. Understanding Local Storage and Session Storage helps beginners build modern web applications that can save user data, maintain sessions, remember preferences, and improve user experience efficiently.
Modern websites often need to store:
Traditionally, websites used:
JavaScript now provides:
The Web Storage API includes:
These storage systems allow browsers to:
Local Storage and Session Storage are widely used in:
Understanding Local Storage and Session Storage is essential for frontend web development.
Web Storage helps developers:
Modern applications heavily rely on browser storage.
Local Storage:
Stored data remains until:
JavaScript provides:
localStorageExample:
localStorage.setItem("username", "Rahul");This stores:
"username""Rahul"JavaScript provides:
getItem()Example:
let user = localStorage.getItem("username");
console.log(user);Output:
RahulStored data can be retrieved anytime.
JavaScript provides:
removeItem()Example:
localStorage.removeItem("username");The specific item is deleted.
JavaScript provides:
clear()Example:
localStorage.clear();This removes:
Session Storage:
When browser tab closes:
Session Storage is useful for:
JavaScript provides:
sessionStorageExample:
sessionStorage.setItem("theme", "dark");This stores:
Example:
let theme = sessionStorage.getItem("theme");
console.log(theme);Output:
darkSession data can be accessed during active session.
Example:
sessionStorage.removeItem("theme");Specific session data is deleted.
Example:
sessionStorage.clear();All session data is removed.
| Local Storage | Session Storage |
|---|---|
| Permanent storage | Temporary storage |
| Persists after browser closes | Removed after tab closes |
| Larger lifespan | Session-only lifespan |
Both use:
Example:
localStorage.setItem("age", 25);Important:
Example:
console.log(typeof localStorage.getItem("age"));Output:
stringDevelopers may need:
Objects must be converted into:
Example:
let user = {
name: "Rahul",
age: 25
};
localStorage.setItem("user", JSON.stringify(user));This stores:
Example:
let data = localStorage.getItem("user");
let user = JSON.parse(data);
console.log(user.name);Output:
RahulJSON helps store complex data structures.
Web Storage is used in:
Modern applications frequently store browser data dynamically.
Example:
localStorage.setItem("theme", "dark");The theme remains saved even after browser restarts.
Example:
localStorage.setItem("cartCount", 5);Shopping carts maintain product counts dynamically.
Example:
sessionStorage.setItem("token", "12345");The session expires after browser tab closes.
Local Storage and Session Storage:
Developers commonly use:
Sensitive information should not be stored directly in:
Examples:
Because:
Security is important in production applications.
Beginners often:
Incorrect example:
localStorage.setItem("user", user);Problem:
[object Object]Correct example:
localStorage.setItem("user", JSON.stringify(user));Benefits include:
Web Storage is fundamental in modern frontend development.
Best practices include:
Readable storage logic improves maintainability.
Understanding Local Storage and Session Storage helps developers:
Web Storage is essential in modern web development.
Local Storage and Session Storage in JavaScript are browser-based storage systems used to save data locally using key-value pairs. Local Storage stores permanent data, while Session Storage stores temporary session data. These technologies are widely used in dashboards, shopping carts, authentication systems, games, and modern web applications.
Local Storage stores browser data permanently until manually removed.
Session Storage stores temporary data during the current browser session.
Local Storage persists after browser closes, while Session Storage is removed after tab closes.
No, objects must be converted using JSON.stringify().
They are used in login systems, shopping carts, themes, games, and modern web applications.