# 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](https://blog.multignite.com/difference-between-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](https://blog.multignite.com/setters-getters-in-javascript-and-typescript), allowing you to store and retrieve data from Local storage using a simple key-value interface.

### Code example in JavaScript

```javascript
// Store data in Local storage
localStorage.setItem("name", "Multignite");
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}`); // Name: Multignite, Age: 36
```

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

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

// Store user object in Local storage
const user = new User("Multignite", "multignite@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.