Storage:

Storage in JavaScript refers to the ability to save data on a user’s browser. This stored data can be accessed and used later, even after the user refreshes the page or revisits the website.
There are two main types of web storage:

  • localStorage
  • sessionStorage

Why Do We Use Storage?
Storage is helpful for many reasons, such as:

  • Remembering user preferences.
  • Storing login sessions
  • Caching data to reduce server request
  • Saving form inputs to prevent data loss

Without storage, every time a user refreshes the page or closes their browser, all that info would be lost. Storage solves that problem by keeping data.

How does it work?

  1. JavaScript gives us simple tools localStorage and sessionStorage – to save, retrieve, and delete data.
  2. They work like a key-value pair system.

Simple Syntax:
Here’s the basic syntax for localStorage(it’s the same for sessionStorage too):

  • Save data: This stores the value under the key name.
  • Get data: This retrieves the value tied to the key.
  • Remove data: This deletes the data for that key.
  • Clear everything: This wipes out all stored data

A simple example:
A mini website where users can type their name, save it and see it displayed even after refreshing the page.
1. HTML structure:

Usage: This sets up the webpage
2.JavaScripe: Load saved name on page load

Usage: This runs when the page loads. It:

  • Check localStorage for a saved name under the key “userName”.
  • If a name exists, it displays it in the <span id=”savedName”>.

3. Javascript: Save name on button click

Usage: This runs when the “Save Name” button is clicked it

  • Grabs the text typed in the input box(nameInput).
  • Saves it in localStorage with the key “userName”.
  • Updates the <span id=”savedName”> to show the name instantly.

Output:

Even if we refresh the page, the name stays there because localStorage keeps it save!

Viewing and editing the storage:
We can see the localStorage or sessionStorage using the browser’s developer tools.

  1. Right-click on your webpage and click “Inspect”.
  2. Go to the “Application” tap(in chrome) or “storage” tab in(in Firefox)
  3. Look under “LocalStorage” or “SessionStorage” to see your saved data. We can edit or delete it here!

–> Storage Limits: Local and session storage usually hold about 5-10MB of data. Cookies are much smaller(around 4 KB).

–> Strings Only: These methods save data as text. If you need to save numbers or lists, you will need to use JSON.stringfy() and JSON.parse

Post Views: 50

Leave a Reply