Html And JavaScript Local Storage

What is local Storage in JavaScript

Local Storage in JavaScript allows Website’s or web applications to store data locally inside a User’s browser - With no expiration date. The data doesn’t get deleted when the browser is closed, and the data is available when the browser again. But there is a catch if the user delete’s his local storage data will be removed and not retrievable again.

Pro’s and Con’s of JavaScript local Storage


  • It stores up to 5-10MB of data (depending on the browser).
  • Easy to use – no need for a web server or backend database.
  • Great for getting an idea up and running and for testing purposes.


  • It only stores up to 10MB of data (5MB in some browsers).
  • It can only store strings. This can restrict you from using it for more complex scenarios although, HTML can be stored as a string – more on that later…
  • It’s local to the browser and specific to the origin (per domain and protocol), and there’s no guarantee that the data will persist even in that same context.

Security Limitation

  • It’s not secure. Don’t store any private or personal information in localStorage.

local Storage vs session Storage vs cookie

The main difference between local Storage, session Storage, and cookie storage is size.


  • 10MB available for Local Storage
  • 5MB available for session Storage
  • 4KB available for Cookies

Of these three Local Storage is the most recent to learn the difference of These types of storage click here

Additional Information

Unlike sessionStorage, data stored in localStorage persists, and is accessible even after the browser closes. On Stack Overflow, cssyphus put together a useful explanation that contrasts the different storage types along with a list of resources.

Session Storage is useful when you need browser storage that does not impact web application performance. Login credentials are held in session Storage as they are cleared once the open tab closes.

Cookies are the oldest kind of in-browser storage. With their small capacity, they can hold small amounts of data, and are not designed to hold sensitive data such as login credentials.

Session storage vs local Storage

Together, these two kinds of storage are the main data storage objects available that the browser can access easily for storing and retrieving information for customers. The main difference between Session and Local kinds of storage is the lifespan of the stored data.

Session Storage is tied to a specific tab the browser may have open, whereas local Storage is accessible across any tab the browser has open. Once the tab closes, the session Storage is deleted, but local Storage persists.

local Storage vs cookie

Compared to local Storage, Cookies are older, and can only fit small amounts of data. There are two kinds of Cookies: session, and persistent.

  • Session Cookies, like sessionStorage, expire when the browser closes.
  • A persistent Cookie has an expiry attribute, or a max-age attribute that designates when the browser deletes the data held in cookie storage.

How to use localStorage methods in JavaScript

There are four basic JavaScript local Storage methods you can use to access and work with local Storage:

  • setItem() - takes a key-value pair and adds it to localStorage
  • getItem() - takes a key and returns the corresponding value
  • removeItem() - takes a key and removes the corresponding key-value pair
  • clear() - clears localStorage (for the domain)

localStorage JavaScript example

The following demo shows how you can store information from the text area in localStorage:

  1. Create a simple index.html file with a single textarea, and two buttons as follows. The textarea id can be anything – in this example, we’ve called it “Here”.
<!DOCTYPE html>
<html lang="en">
   <h1>JavaScript localStorage demo</h1>
   <textarea id="Here" rows="10" cols="80"></textarea>
   <button onclick="mySave()">Save</button>
   <button onclick="myLoad()">Load</button>

     function mySave() {
       var myContent = document.getElementById("myTextarea").value;
       localStorage.setItem("myContent", myContent);

     function myLoad() {
       var myContent = localStorage.getItem("myContent");
       document.getElementById("Here").value = myContent;

How the code looks like lies over here:

JavaScript localStorage demo

Save Load

Thanks you for reading I hope you have learned a thing or two! Bye.


Yeah but local storage is virtually useless tbh, just use postgres or mysql

localStorage is mostly good for saving client settings

1 Like

no that is best to be stored on server or cache. localstorage is pointless

wdym “on cache”?

1 Like

Just cache user prefernces

look like the system can’t stop me from doing it JOB BUMP also you too late @gautam i already bumped the topic before you could close it!