DEV Community

loading...
Cover image for What is localStorage?

What is localStorage?

rahxuls profile image Rahul ・2 min read

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 storage

setItem()

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

getItem()

const data = JSON.parse(localStorage.getItem('items')); 
console.log(data); 
Enter fullscreen mode Exit fullscreen mode

Note: JSON.parse() is used to covert the contents of localStorage back into something which we can work with later in the data variable.

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'); 
Enter fullscreen mode Exit fullscreen mode

clear()

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

localStorage.clear(); 
Enter fullscreen mode Exit fullscreen mode

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.

Originally at => https://rahulism.tech/article/complete-guide-to-local-storage/

😀Thanks For Reading | Happy Coding😎



Discussion (6)

pic
Editor guide
Collapse
cboton profile image
CBoton

This is helpful for me right now, I'm doing a MERN stack e-commerce site course from Udemy and one of the big complaints I've read is how the instructor stores user data in local storage. My only complaint is that you have a pizza icon with your "buy me a coffee" but other than that thanks for the post.

Collapse
rahxuls profile image
Rahul Author

I'm sorry. But for me pizza and coffee is life.

Collapse
mafee6 profile image
MAFEE7

nice

Collapse
marks7e profile image
Marcos Barrera

Rahul. Thanks for the article. It's intuitive, short, but fully on useful information.
Keep the good work!
Also, your blog is dope!

Collapse
rahxuls profile image
Rahul Author

Hey! Thanks Man.

Collapse
ra1nbow1 profile image
Matvey Romanov

Good read!