What Is Local Storage In JavaScript And How To Use It by@RAHULISM
352 reads

What Is Local Storage In JavaScript And How To Use It

April 8th 2021
2 min
by @RAHULISM 352 reads
tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

Local Storage lets us save the data which is stored in the browser even when a user refreshes or closes a page. Local Storage holds 2 - 100MB+ data. It is also useful for web interface data and offline storage of offline data. LocalStorage is synchronous, meaning each operation called would only execute one after the other. It does not store sensitive user information in localStorage. It is not a substitute for a server-based database as information is only stored on the browser.
featured image - What Is Local Storage In JavaScript And How To Use It
Rahul HackerNoon profile picture

@RAHULISM

Rahul

Developer and Blogger

About @RAHULISM
LEARN MORE ABOUT @RAHULISM'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

Local Storage let us save the data which is stored in the browser even when a user refreshes or closes a page. Let's know more about what is Local Storage in JavaScript.

Local Storage holds 2 - 100MB+ data. Saved all data in string(JSON) format. It is also useful for web interface data. It is also used for offline storage of data.

It has 3 three types of methods

  • Read Data
  • Write Data
  • Delete Data

Methods

  • setItem(k,v) - Add key and value to local storage
  • getItem(k) - Retrieve a value by the key
  • removeItem(k) - Remove an item by key
  • clear() - Clear all storagesetItem()

setItem()

    let itemsArray = {
       id: "OWUAIJFNSOTEKSMJUFTHDSUQ", 
       name: "Rahul"
     }
     localStorage.setItem('items', JSON.stringify(itemsArray));
image

getItem()

const data = JSON.parse(localStorage.getItem('items')); 
console.log(data);
Note: JSON.parse() is used to covert the contents of
localStorage 
back into something which we can work with later in the data variable.
image

removeItem()

When passed a key name, the removeItem() method will remove that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing.

localStorage.removeItem('items'); 

clear()

This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters.

localStorage.clear(); 

Limitations

  • Do not store sensitive user information in localStorage.
  • It is not a substitute for a server-based database as information is only stored on the browser.
  • localStorage is limited to 5MB across all major browsers.
  • localStorage is quite insecure as it has no forms of data protection and can be accessed by any code on your web page.
  • localStorage is synchronous, meaning each operation called would only execute one after the other.

😀Thanks For Reading | Happy Coding😎

Previously published at Complete Guide To localStorage

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa