/
/
Local Storage Explained in Plain English
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Local Storage Explained in Plain English

“Local Storage” sounds like a complicated subject, but this article will break down what it means and why you should be interested in learning more. Local Storage has been around for some time now, but many developers don’t know exactly what they are or how to use them effectively. 💾

What is local storage in JavaScript?

If you are using a web browser, then every time you close your tab or return to the home page of an app, it saves part of what was running. Think about how often that happens, and at any given moment, there is probably someone closing out their tabs in another country!🔥

That means anyone can see everything they were doing on these sites without having any password for them. This data stays stored online forever with no one keeping track – until now!!! A new service just came up called “local storage” has solved this problem by letting people store things only locally (on their device) where nobody but themselves will be able to find it again after taking care of business here!!

Which are examples of local storage?

let userObject = {
    name: 'Ron Fybish',
    age: 26,
    married: false
};

4 Basic methods you can use with Local Storage:

  1. setItem(): Add key and value to Local Storage.
  2. getItem(): Retrieve a value by the key from Local Storage.
  3. removeItem(): Remove an item by key from Local Storage.
  4. clear(): Clear all Local Storage.

Local Storage – Things You must know 🔥

Local Storage can only save strings, so storing objects requires that they be turned into strings using JSON.stringify(). That also means the object must be run through JSON.parse() on the way out of Local Storage.

📅 localStorage.setItem() – Add key and value to local storage.

// 📅 Convert the person object into JSON string and save it into storage.
localStorage.setltem('userObject', JSON.stringtfy(userObject));

📅 localStorage.getItem() – Retrieve a value by the key from local storage.

// 📅 Retrieve the JSON string.
let userJsonStrtng = localStorage.getItem('userObject');

📅 Parse the JSON string back to the JavaScript object.

// 📅 Parse the JSON string back to JS object.
let retrieveUserObject = JSON.parse(userJsonStrtng);
retrieveUserObject; // Output: 👉 {name:'Ron Fybish', age: 26, married: false}

📅 Local Storage – Accessing individual values.

// 📅 Accessing individual values.
retrieveUserObject.name; // Output: 👉 'Ron Fybish'
retrieveUserObject.age; // Output: 👉 26
retrieveUserObject.married; // Otput: 👉 false

Local Storage – Key Points ✔️❌

  1. Do not store sensitive user information in Local storage.
  2. Local Storage is limited to 5MB across all major browsers.
  3. Local storage is part of the web storage API, which allows you to store data on a user’s browser that your application can access.
  4. Local storage allows #javascript sites and apps to store data locally in the browser, without expiration date.
  5. This means that the data stored on the browser will stay there even after you close your browser window.
  6. In other words, you can store any data in Local Storage that is simple and easy to understand.

Conclusion 🎁

You now know how to use Local Storage in your web development projects and understand this type of storage limitation. I hope you’ve learned a lot from my post, but if not, feel free to contact me for more information on what it takes to work with local data storage. If any other topics interest you related to web development or marketing strategy, please let me know.

Recent Snippet

How to use reduce over an array of objects

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.

How to get the highest or the lowest value in an array

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.