Local Storage using JavaScript and Typescript - Simple & Code Examples

Local Storage using JavaScript and Typescript - Simple & Code Examples

This blog post will provide an overview of Local storage in the browser using JavaScript and TypeScript. I will explain what Local storage is, what benefits it provides and how to use it in your applications. I will also provide two code examples, one in JavaScript and one in TypeScript, to illustrate how Local storage works and how it is commonly used.

Overview of Local storage

Local storage is a browser feature that allows developers to store key-value pairs in a user's browser. It provides a way to store data in a user's browser that can be accessed across multiple sessions or even on different devices. Local storage is useful for storing small amounts of data that need to persist between sessions, such as user preferences or settings.

Benefits of using Local storage

One of the main benefits of using Local storage is that it provides a way to store data in the user's browser, which can be accessed across multiple sessions or even on different devices. This makes it ideal for storing user preferences or settings that need to persist between sessions. Local storage is also easy to use, with a simple API that consists of two methods: localStorage.setItem() and localStorage.getItem(). These methods behave like setters and getters, allowing you to store and retrieve data from Local storage using a simple key-value interface.

Code example in JavaScript

// Store data in Local storage
localStorage.setItem("name", "Esther");
localStorage.setItem("age", "36");

// Retrieve data from Local storage
const name = localStorage.getItem("name");
const age = localStorage.getItem("age");

console.log(`Name: ${name}, Age: ${age}`);

In this code example, we store two key-value pairs, "name" and "age", in Local storage using localStorage.setItem(). We then retrieve the values of these items using localStorage.getItem() and store them in variables name and age. Finally, we log the values of these variables to the console.

Code example in TypeScript

class User {
  constructor(public name: string, public email: string) {}
}

// Store user object in Local storage
const user = new User("Esther", "esther@example.com");
localStorage.setItem("user", JSON.stringify(user));

// Retrieve user object from Local storage
const userJson = localStorage.getItem("user");
const retrievedUser = JSON.parse(userJson) as User;

console.log(`Name: ${retrievedUser.name}, Email: ${retrievedUser.email}`);

In this code example, we define a User class with two properties, name and email. We then create a new User object and store it in Local storage using localStorage.setItem() and JSON.stringify(). We retrieve the user object from Local storage using localStorage.getItem() and JSON.parse(), and cast the result as a User object using a type assertion. Finally, we log the user object's properties to the console.

Conclusion

Local storage is a useful browser feature that allows developers to store data in a user's browser that can be accessed across multiple sessions or even on different devices. It provides a way to store small amounts of data that need to persist between sessions, such as user preferences or settings. Local storage is easy to use, with a simple API that consists of two methods: localStorage.setItem() and localStorage.getItem(). These methods behave like setters and getters, allowing you to store and retrieve data from Local storage using a simple key-value interface.