Having trouble with localstorage.setitem function in Angular?

Check out the function below. I can see an object in the console.log using res:

login2(){
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
      res => console.log(res.user),
      res2 =>localStorage.setItem("getLoggedInUserANG1",JSON.stringify(res2.user))
      )

  }

When I attempt to save the same object in local storage, it doesn't get saved. Despite being new to angular, there don't seem to be any bugs and I'm unsure why it's not saving.

After saving it, I also want to retrieve it using getitem in an array variable and log it to the console. I'm trying to troubleshoot and figure out where exactly I'm making mistakes.

Take a look at the screenshot of my console.log:

https://i.sstatic.net/39w1W.png

Answer №1

res2 has not been defined yet. I recommend checking out the JavaScript Arrow Functions documentation.

Here is an example:

login2() {
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
        res => {
            console.log(res.user);
            localStorage.setItem("getLoggedInUserANG1",JSON.stringify(res.user));
        }
    )
}

Answer №2

I encountered a similar issue, which turned out to be related to my browser choice. Switching from Chrome to Edge helped resolve the problem by recreating the project and setting Edge as my default browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Demonstrate the proper implementation of a Stepper component using Material UI in a React.js

I am trying to display a responsive screen using "progressive forms" with React.js and Material Ui. I have implemented the Stepper component for this purpose, but when I click the "Next Button", the button is hidden but the next step content with the text ...

What is the best way to determine if a checkbox has been selected in ExtJS?

I have a panel with a checkbox inside it. I am trying to figure out how to check if the checkbox is selected or not using an external function. Can someone please assist me with this? this.currentManagerPanel = new Ext.Panel({ border: false, wid ...

Having trouble with the second Angular directive not functioning correctly

I am encountering an issue with two directives on the same page. The first directive is functioning correctly, but the second one is not working as expected. Below is the code snippet: HTML <body class="login" ng-app="Login"> <div ng-controller ...

Troubleshooting Issues with Retrieving Android Data from MySQL Database using PHP and JSON

Even though I have encountered this question multiple times on stack overflow, I have tried all the solutions provided and none of them seem to work for me. I am attempting to display data in a List View. The data is stored in JSON format and it appears t ...

The website is having trouble reading the local json file accurately

Currently, I have developed an HTML site that utilizes JavaScript/jQuery to read a .json file and PHP to write to it. In addition, there is a C++ backend which also reads and writes to the same .json file. My goal is to transmit the selected button informa ...

What is the best way to include the Mailchimp integration script in the `Head` of a Next.js project without causing any pre

Hello there Incorporating mailchimp integration into my nextjs site is proving to be a challenge. I've been attempting to add the following code snippet to next/Head within my custom _document <script id="mcjs">!function(c,h,i,m,p){m= ...

Ensuring Smooth Transfer: Sending Local Storage Data to MVC Controller

I'm attempting to send an array of strings from my local storage (key value) to an MVC controller. Here's the code I have so far: Inside the cshtml View file: <script> function getFavouriteBooks() { var ids = JSON.par ...

Can a jQuery/JavaScript script be run standalone?

I've got a bunch of HTML pages saved on my computer and I'm looking to create a JavaScript script that can extract specific text or elements from those pages. I found some jQuery code snippets on Stack Overflow that do what I need, but I'm n ...

What is the best way to invoke a custom hook that returns a value within the useEffect hook?

I have a unique situation where I am using a custom hook that returns an object based on the parameter it receives. I now need to modify this behavior by recreating the object with updated parameters within the useEffect function. The challenge is that I c ...

What is the best way to focus on an object using a particular variable in javascript?

I am currently developing an online game where each user is assigned a unique ID. Below is the client code used to create a new player: const createNewPlayer = (id) => { return player[player.length] = { x:0, y:0, id:id } } The ...

Modifying complex JSON values within nested structures

Here is the JSON data I am working with: { "name": "table", raw_material: { "iron": 2, "wood": 1, "glue": 1 } } Occasionally, it might look like this: { "name&q ...

I don't understand why this error keeps popping up. It seems that there are several `InputBase` components nested within a

Issue: The error message indicates that there are multiple instances of the InputBase component within a FormControl, causing visual inconsistencies. Only one InputBase should be used. I have tried enclosing my forms within the FormControl, but the error ...

Displaying the information from a nested array of objects in an HTML table through iteration

In the code snippet below, there is an input with a nested array of objects. The main array of objects is called summary and within it, there's a nested array called run_type. let input = { "summary": [ { " ...

Unexpected behavior encountered when using TypeScript type declarations

I am currently working on a Gatsby side project incorporating Typescript for the first time. I initially expected Typescript to behave similarly to PHP type declarations, but I have encountered some unforeseen issues. Despite feeling confident in my Typesc ...

Executing a jQuery AJAX request in an ASP.Net MVC 5 application

In my ASP.Net MVC 5 project, I have a table storing Roles Table values. When I click on the edit button, it triggers a jQuery request to fetch data, which returns something like "UMS.Entities.Role". However, I am unable to retrieve the values from it even ...

The initial rendering of the connected component is unsuccessful due to the fact that the Redux state has not been fully

Currently, I am utilizing Redux thunk and axios to handle server requests and update the state based on the response. An issue arises when trying to render a connected component with an initial state that relies on data from the server. In this scenario, ...

Error: Execution exceeded the time limit of 5000 milliseconds - Combination of Protractor and CucumberJS

latest versions: cucumberjs --version 1.2.2 protractor --version 4.0.1 Both were globally installed via npm Ever since I upgraded to a higher version of cucumberJs, I've been encountering this error message: Failures: 1) Scenario: Retrieving recor ...

Leveraging the power of AWS API Gateway and Lambda for seamless image upload and download operations with Amazon

I have successfully created a lambda function to handle image uploads and downloads to s3. However, I am encountering difficulties with the proxy integration from the API Gateway. Despite reviewing the documentation and looking at this specific question ...

Execute a self-invoking JavaScript function with dynamic code

I'm facing a challenging problem that I just can't seem to solve... There's a function on another website that I need to use, but unfortunately, I can't modify it The code in question is: Now, I am looking to add a prototype "aaa" to ...

Activate automatic selection when the input field is disabled

How can I enable auto-select for text in an input field even when it is disabled? Currently, the auto select feature doesn't work when the field is disabled. Here is my HTML: <input type="text" class="form-control" ng-model="gameId" select-on-cli ...