Guide on retrieving data from local storage and exhibiting it in an input box that is disabled using AngularJS

I have securely stored my API key in local storage. Now I need to retrieve and display that key in an input field on a different HTML page. The input field should be pre-filled with the key from local storage and disabled so it cannot be edited.

Below is the code used to store values in local storage

 angular
  .module('MyApp', []);

angular
  .module('MyApp')
  .controller('KeyController', [
    '$scope',
    function($scope) {
      $scope.savedApiUrl = '';
      $scope.savedApiToken = '';

      $scope.submit = function() {
        localStorage.setItem('api_url', $scope.api_url);
        localStorage.setItem('api_token', $scope.api_token);

        var savedApiUrl = localStorage.getItem('api_url');
        var savedApiToken = localStorage.getItem('api_token');
        $scope.savedApiUrl = savedApiUrl;
        $scope.savedApiToken = savedApiToken;
        console.log($scope.savedApiUrl);
        console.log($scope.savedApiToken)
      }
    }
  ]);

Answer №1

You can find a link to the codepen below for reference.

https://codepen.io/vishwa-/pen/YVaGmR?editors=1011


    <div ng-app="MyApp"  ng-controller="KeyController">
      <md-input-container>
        <label>Title</label>
        <input ng-model="savedApiToken" ng-disabled="true">
    </md-input-container>
  </div>

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

Sending a parameter to a request-promise function within an iteration through a forEach loop

I have successfully implemented an API call for price data. However, I am facing an issue while trying to pass the variable exchange_pair_id into the then() function. Within the forEach loop, the exchange_pair_id is accurate for each asset. But inside the ...

Using Express-session on dual servers

I have been experimenting with express-session on two different local servers. The first server is dedicated to database manipulation, while the second server is responsible for loading pages. My goal is to store some data in the session from the first ser ...

When attempting to log out of Keycloak, a TypeError occurs in the front-end application stating that it cannot read properties of undefined related to the action of logging out

I've been trying to implement a logout feature in my front-end application using Keycloak, but I'm encountering difficulties. Most of the examples I found online are for older versions of Keycloak and use 'auth' and 'redirectURI&ap ...

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

I've been working on developing a new forum using Express and React, but I'm facing challenges with saving form data to the database. Currently, my goal is to store topic titles in a MongoDB collection, with plans to expand to include message con ...

Struggling to fetch data from the Strapi page is posing a challenge

Currently, I am facing an issue where the frontend developers on my team are unable to retrieve data from the backend that I built for them using Strapi. Even after pulling my changes from github, they continue to face difficulties accessing the data. The ...

What is the best approach to have a React page render only the specific component that has changed, rather than re

Recently, I've been facing an issue with a toggle implementation where the page always re-renders the entire content upon the first click of the toggle. Here is a snippet of how it looks: export default function Toggle({isChecked, label}: Props) { r ...

Javascript deepmerge causes issues with objectid manipulation

While I have experience with javascript, using node.js for the first time has presented some challenges. I am attempting to form a basic query to be used in mongoose, with the intention of adding conditions later on. I am currently employing deepmerge to m ...

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

Discover the method for converting a local file into a string

Looking to retrieve and read an SVG file in Angular 6 from the assets folder as a string. I've attempted the following: this._htmlClient.get('../../assets/images/chart1.svg').subscribe(data => { console.log('svg-file: ', ...

Get a reference to pass as an injection into a child component using Vue js

Is there a way to pass a reference to child components? For example: The Parent component provides the ref: <template> <div ref="myRef" /> </template> <script> export default { name: 'SearchContainer', pr ...

Display a div when a specific moment in the video is reached and then conceal it at a different

I'm attempting to display a div at a specific time during a video and have it disappear 2 seconds later. However, the current code I've tried is not producing the desired result: $(document).ready(function() { $("#element_1").hide(); document ...

Is there a way to stop Vuex from causing issues with my class instance?

I am attempting to save a representation of a class in Vuex, specifically the EditorState from ProseMirror. The class's properties are mostly unchangeable externally, meaning that any modifications require replacing the existing instance with a new on ...

Challenges with loading elements in Protractor

I'm feeling a bit confused about Protractor at the moment. It seems like sometimes my elements load in time for the next action to happen, while other times they do not. I'm assuming this has something to do with its asynchronous nature. For ex ...

Vue failing to connect data to image source

I encountered an issue when attempting to bind data to the src attribute within an image. Below is a snippet of my code where I utilize :src to bind the image property. Furthermore, I confirmed that this.image is successfully printed within the created() ...

Utilizing ExpressJS for IP handling combined with AngularJS for $http GET requests

Struggling to grasp ExpressJS, I'm facing difficulties in displaying the IP address from an Express route in the browser using an Angular controller. To achieve this, I am utilizing two Node.js modules - request-ip and geoip2. These modules help me r ...

Troubleshooting: Issues with the functionality of AngularJS Material dialogs

I am facing an issue with displaying an Array of items in a dialog. Despite not receiving any errors, the output is not as expected. $scope.showDialog = function (ev) { $mdDialog.alert({ controller: 'DialogController', ...

Strategies for effectively binding values in dynamically added and removed fields

I am facing an issue with making binding work on dynamic input fields that can be added and removed. Despite trying various methods, I still can't get it to function as desired. Every time I try to bind, only one data row appears in the dynamic input ...

What could be causing this function to malfunction?

Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...

Tips for restricting users from inputting spaces into a form field using ReactJS

Within my application, I have developed a specialized component named QueryForm that serves the purpose of enabling search capabilities. The code snippet being outputted by this component is as follows: ...