Understanding Local Storage in JavaScript

-

 

Introduction

Local Storage is a web storage feature in JavaScript that allows developers to store data in the browser persistently. Unlike session storage, local storage data remains available even after the browser is closed and reopened. This is useful for storing user preferences, themes, authentication tokens, and more.


Features of Local Storage

  • Stores key-value pairs.

  • Data persists even after closing the browser.

  • Maximum storage limit is around 5MB.

  • Only accessible within the same origin (same protocol, host, and port).

  • Works asynchronously but does not support automatic expiration.



Using Local Storage in JavaScript

1. Storing Data

To store data in local storage, use the setItem method.

This stores the key username with the value JohnDoe in the local storage.


2. Retrieving Data

To retrieve stored data, use the getItem method.

If the key does not exist, getItem returns null.


3. Removing Data

To remove a specific item from local storage, use the removeItem method.

 

This removes the username key and its value from storage.


4. Clearing All Data

To clear all local storage data, use the clear method.

This removes all stored key-value pairs.


Example: Storing and Displaying User Preferences

Let's create a simple example where a user selects a theme, and we store their preference using local storage.

HTML(index.html)

JavaScript (script.js)


Explanation

  1. When a user clicks on the "Dark Mode" button, setTheme('dark') stores the theme preference in local storage.

  2. The applyTheme() function checks local storage for the saved theme and applies it accordingly.

  3. Even after refreshing or reopening the browser, the chosen theme persists.

Output

  • Clicking "Dark Mode" applies a black background with white text.

  • Clicking "Light Mode" resets to the default white background with black text.

  • Refreshing the page retains the selected theme.

 

Demo Output:


 

Single File Implementation -HTML(index.html)




Conclusion

Local Storage in JavaScript is a powerful tool for persisting data in the browser. It is useful for storing user preferences, authentication details, and lightweight data without requiring a backend. However, since it is accessible via JavaScript, it should not be used to store sensitive information like passwords or private user data.

 



 



 


 



 



Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Task Manager with CRUD Operations (Node.js, Express, MongoDB, REST API, HTML, CSS, JavaScript)

-
Image
🔹 Introduction In today’s fast-paced world, managing tasks efficiently is crucial. In this blog, we’ll build a Task Manager where users can Create, Read, Update, and Delete (CRUD) tasks using a RESTful API with Node.js, Express, and MongoDB (Mongoose ODM) . 💡 By the end of this guide, you will: ✅ Understand how to structure a full-stack project ✅ Learn how to create a REST API with Node.js & Express ✅ Integrate a MongoDB database using Mongoose ✅ Build a frontend with HTML, CSS, and JavaScript ✅ Connect the frontend to the backend for seamless CRUD operations 📌 Tech Stack Used 🔹 Frontend: HTML, CSS, JavaScript 🔹 Backend: Node.js, Express.js 🔹 Database: MongoDB (Mongoose ODM) 🔹 API Type: RESTful API 🔹 Version Control: Git & GitHub 📂 Project Structure A well-organized project structure makes development efficient. Here’s how our Task Manager is structured: 🛠 Backend Implementation (Node.js, Express, MongoDB) 1️⃣ Setting Up the Backend Step 1: Initialize the ...
Read more

Mastering JavaScript Functions: Declaration, Expression, and Arrow Functions

-
Image
 Functions are a fundamental building block of JavaScript, enabling you to write reusable and maintainable code. In this blog, we’ll explore the three main ways to define functions in JavaScript: function declarations, function expressions, and arrow functions. We'll also dive into practical examples for each. 1. Function Declaration A function declaration defines a named function that can be invoked anywhere in its scope. This is because of a feature called hoisting , which allows function declarations to be moved to the top of their scope during the compile phase. Syntax: Example: Key Characteristics: The function has a name ( greet in this case). It can be called before its declaration due to hoisting.
Read more

Mastering Control Structures in JavaScript

-
Image
 Control structures form the backbone of any programming language, allowing developers to dictate the flow of execution in their code. JavaScript, being a versatile and widely-used language, offers several control structures such as conditional statements and loops to enable dynamic decision-making and repetitive task handling. In this blog, we’ll explore control structures in JavaScript with examples for better understanding and implementation. 1. Conditional Statements 1.1 if/else Statements The if statement executes a block of code if a specified condition evaluates to true . The else statement specifies a block of code to execute if the condition is false . Syntax: Example: 1.2 if/else if/else Statements Use else if for multiple conditions. Example: 1.3 Ternary Operator For concise conditional expressions, use the ternary operator. Example:  
Read more