javascript Module 41

  Module 41 : Local Storage and Session Storage. 

📚 1. Introduction to Web Storage

Web Storage is a browser feature that allows web applications to store data locally within the user's browser, without needing a backend database or cookies.

              

Types of Web Storage:

Storage Type

Lifespan

Scope

Capacity

Accessible From

localStorage

Until manually cleared

Same origin

~10 MB

Any tab/session

sessionStorage

Until tab is closed

Tab-specific

~5 MB

Only same tab

 2. Syntax

2.1 localStorage API

// Store data localStorage.setItem("username", "rehana"); // Retrieve data let user = localStorage.getItem("username"); // Remove item localStorage.removeItem("username"); // Clear all localStorage.clear();

2.2 sessionStorage API

// Store data sessionStorage.setItem("cart", "Apple, Banana"); // Retrieve data let cartItems = sessionStorage.getItem("cart"); // Remove item sessionStorage.removeItem("cart"); // Clear all sessionStorage.clear();

 3. Deep Conceptual Differences

Feature

localStorage

sessionStorage

Persistence

Permanent until cleared

Cleared when tab is closed

Scope

Shared across tabs of same origin

Isolated to the specific browser tab

Use Case

User settings, theme, auth tokens

Form data for multi-step forms

 4. Use Case Examples

Example 1: Remember Theme with localStorage

<button onclick="changeTheme()">Toggle Theme</button> <script> function changeTheme() { let theme = document.body.classList.toggle("dark") ? "dark" : "light"; localStorage.setItem("site-theme", theme); } window.onload = function() { const savedTheme = localStorage.getItem("site-theme"); if (savedTheme === "dark") document.body.classList.add("dark"); }; </script>

✅ Explanation: The theme persists even after closing and reopening the browser.

 Example 2: Temporary Form Auto-Fill with sessionStorage

<input type="text" id="name" placeholder="Enter your name"> <script> const input = document.getElementById("name"); // Save as user types input.addEventListener("input", () => { sessionStorage.setItem("name", input.value); }); // Restore on reload (same tab) window.onload = () => { const savedName = sessionStorage.getItem("name"); if (savedName) input.value = savedName; }; </script>

✅ Explanation: Name is remembered as long as the tab stays open.

5. Build a Persistent Notes App

 Objective:

Create a small notes-taking web app using localStorage to save notes even after the browser is closed.

 Steps:

Create an HTML page with a textarea and a "Save" button.

On clicking Save, store the note in localStorage.

On page load, retrieve and display the note.

Code:

<textarea id="note" rows="5" cols="30" placeholder="Write your note..."></textarea> <button onclick="saveNote()">Save Note</button> <script> function saveNote() { const note = document.getElementById("note").value; localStorage.setItem("myNote", note); } window.onload = () => { const savedNote = localStorage.getItem("myNote"); if (savedNote) { document.getElementById("note").value = savedNote; } }; </script>

✅ Outcome:

Note remains even after browser restart.

2: Multi-Tab Form Save (sessionStorage)

Create a multi-step form that saves inputs temporarily using sessionStorage.

Steps:

Build a 2-step form (Name and Email).

Save values in sessionStorage after each step.

Autofill if user reloads in the same tab.

📘 6. Exercises

✅ Exercise 1:

Build a simple login page. On successful login, store the username in localStorage. Show a welcome message on page load if the user is remembered.

✅ Exercise 2:

Create a product cart using sessionStorage. Add/remove products dynamically and display them on the page.

✅ Exercise 3:

Make a “last visited” tracker using localStorage. On every visit, show the last visit time.

 Research Insights

 Browser Storage Limits

localStorage: ~5-10MB per domain depending on browser.

sessionStorage: Smaller, ~5MB.

Storage is synchronous, meaning it can block the main thread for large data.

🔒 Security Notes

Data is stored in plain text – never store sensitive data like passwords.

Use JSON.stringify() and JSON.parse() to store/retrieve objects.

🛡 Best Practices

Use try...catch to handle storage errors.

Don’t overload with too much data.

Always check for storage support:

if (typeof(Storage) !== "undefined") { // Safe to use localStorage/sessionStorage } else { alert("Sorry, your browser does not support Web Storage..."); }

📚 Summary

Feature

Use Case

API Example

localStorage

Theme settings, persistent login

localStorage.setItem()

sessionStorage

Form progress, temp user data

sessionStorage.setItem()

📎 Additional

Web Docs - localStorage

HTML5 Rocks Guide to Web Storage (Archived)

Can I use - Web Storage

📝Create a "User Profile Page"

 that uses both localStorage and sessionStorage:

localStorage to save user's theme, language preference.

sessionStorage to save temporary inputs like phone number (auto-cleared on tab close).