How to store value in a string object and display that element on another page?

Question

My job myFunction picks up the elements username and password typed,and sends these values storing in a global variable to the next page.

My job tToken authenticate this information and play to next page the valid Token for me to manipulate.

The problem is that I am not able to do or think of a way to play the login and password typed in the field for the next pages dynamically. Then I managed to do this but it works only on the LOGIN page, it displays the filled object only on the login page. When the login is done and authenticated, after updating the page everything disappears, exactly for being stored in variables the values I want. How to do this, other than by variables?

var globalcredential =  "/v1/credentials";
var globalauth = "/v1/auth";
var userlogin = new String();
var passwordlogin = new String();

function myFunction(){
       var userElement = document.getElementsByName('username');
       var passwordElement = document.getElementsByName('password');
       userlogin = $(userElement).val().toString();
       passwordlogin = $(passwordElement).val().toString();
    };



function auth(){

var account = {
        grant_type: "password",
        login : userlogin,
        senha : passwordlogin
    };

    var jsonAccount = JSON.stringify(account);

    console.log(jsonAccount);
    $.ajax({
                  type: "POST" 
                , method : "POST"
                , url : globalauth
                , contentType : "application/json"
                , dataType : "json"
                , data: jsonAccount
                ,success : function(data){
                    console.log("oi");

                },beforeSend : function(request){
                request.setRequestHeader('Content-Type', 'application/json');
        },
        }).done(function(response, status){
          console.log(response,status);     
        }).fail(function(error){
          console.log(error);
        }).always(function(response, status){
        });
}

var classname = document.getElementsByClassName("buttonlogin");

 Array.from(classname).forEach(function(element) {
          element.addEventListener('click', myFunction);
                  element.addEventListener('click', auth);
      });

Answer 1

You can use the window.localStorage object (see more in https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) With it you will be able to store information on one page and recover on another, since it stores the information in the browser.

Incrementing your code:

function myFunction(){
   var userElement = document.getElementsByName('username');
   var passwordElement = document.getElementsByName('password');
   userlogin = $(userElement).val().toString();
   passwordlogin = $(passwordElement).val().toString();

   // armazenar o usuário
   window.localStorage.setItem('usuario', userLogin);

};

On a subsequent page, it will be possible to get the user with the instruction:

var usuario = window.localStorage.getItem('usuario');

When you need to remove the item, use:

window.localStorage.removeItem('usuario')

But be careful with the storage of sensitive information (such as passwords) in the browser, they can be accessed by another page! The best is to store with some encryption. The most common authentication mechanisms in the various languages do not require you to send the password to each request, so it is interesting not to store it! Usually for subsequent requests, after logging in, a server-generated session number, or encrypted tokens, such as in JWT.

Answer 2

The idea would be an extension to assist an Angular system, where I pull information from a server x and use this information to optimize automatic logins in z v y urls.

I used a specific function of google.Storage documentation that would be slightly different from localstorage https://developer.chrome.com/extensions/storage With localstorage it would not be possible, because as you already say is local, I could not use it to authenticate and provide the token to pull the logins and passwords stored on a server to automatically access the z v y urls.

Example of GET :

   tToken(function(d){
            $.ajax({
                  type: "GET"
                , method : "GET"
                , url : globalauth
                , contentType : "application/json"
                , dataType : "json"
                , Authorization : "Bearer" + d

Below is just the function that captures dynamically what is typed authenticates the token to later perform a GET ajax of this information to pull the data from the database.

 function tToken(callback){
    var b;
    var a;
    chrome.storage.local.get('login', function (result) {
              b = result.login;
              console.log(b); 
          chrome.storage.local.get('password', function (result) {
              a = result.password; 

  var account = {
            grant_type: "password",
            login : b,
            senha : a
        };

  var jsonAccount = JSON.stringify(account);
  console.log(jsonAccount);
        $.ajax({
                      type: "POST" 
                    , method : "POST"
                    , url : globalext
                    , contentType : "application/json"
                    , dataType : "json"
                    , data: jsonAccount
                    ,success: function(data){
                        var obs1 = JSON.stringify(data);
                        var newa = JSON.parse(obs1);  
                        var key = newa.data["token"];
                        callback(key);
                    },beforeSend : function(request){
                    request.setRequestHeader('Content-Type', 'application/json');                   },
    }).done(function(response, status){
    }).fail(function(error){
      console.log(error);
    }).always(function(response, status){
    });
    });
    });
  }

function save(){
    var userElement = document.getElementsByName('username');
    var passwordElement = document.getElementsByName('password');
    var channels = $(userElement).val();
    var keywords = $(passwordElement).val();

    chrome.storage.local.set({'login': channels});
    chrome.storage.local.set({'password': keywords});
    console.log(keywords);
    console.log(channels);
}


var classname = document.getElementsByClassName("buttonlogin");

 Array.from(classname).forEach(function(element) {
           element.addEventListener('click', save);
      });