Monday, 25 July 2022 17:50

Working With Angular Local Storage and Interceptors in Angular 3

Angular Local Storage Angular Local Storage pixabay

If you're familiar with Angular, you might have seen the new localStorage API. But, what does that mean? How do I work with it? In this article, we'll explore Local Storage and its benefits, and also look at the Interceptors in Angular.

Here, we'll cover how to use these APIs and make the most of them. Then, we'll move on to Angular's newest feature: object encapsulation.


What is Local Storage?

What is Angular Local Storage? is a service that stores data and preserves it when the browser is closed. This service uses a singleton model so that only one instance of a particular component can exist in a given location. It's used for data like usernames and passwords. The service also works with other data sources, including JSON. It can be accessed through a URI that's passed to the service.

Local storage can be used for a variety of things. In addition to local data, it can also be used to store session data. The local storage API is similar to that of vanilla javascript. It can be called directly from components or through a service layer. The storage mechanism itself can be abstracted away by a third-party library. This article will discuss how to use local storage and create a service layer.

Creating the Angular App

Using the HTML5 Local storage is a good way to keep data in your Angular app. It allows you to use the browser's memory to store objects. However, this method requires a lot of code and is not recommended for all applications. In this tutorial, you will learn how to use angular local storage to store data locally. Angular provides the localStorage API to create Angular apps.

In a project with local storage, you can easily use decorators to mark variables for storage. To make testing easier, you can use a mock dependency. Using a mock will also save you from having to deal with localStorage values. This feature is very useful for testing your app. After all, you need to be able to access the data without having to use any other APIs or files.

Interceptors in angular

In Angular Local Storage, you can use interceptors to handle a variety of tasks. For example, you can add custom headers to outgoing requests and log incoming responses. You can even use interceptors to handle authentication and error handling. The following code shows how to use interceptors in Angular Local Storage. Alternatively, you can use the route module to handle incoming requests.

In the code sample above, you'll notice that the interceptor uses an AuthenticationService and a method that's been added to the Angular app's AuthenticationService. The interceptor is a single-class object that implements the HttpInterceptor interface. It contains one method, intercept(), that takes two parameters: a JWT and an AngularJS token. The code in intercept() clones the request, updates the header with the JWT, and then passes the request back to the web server.


  • 1