如何在其他页面上保留JavaScript值

Question

I have a function that get a value that needs to be accesed across multiple pages (function below).

var currentProperty = '';
function goTo(ele){
    var firstLine = ele.getAttribute('value');
    var user = firebase.auth().currentUser;
    var ref = firebase.database().ref().child("users").child(user.uid).child('rentingAddresses');

    ref.orderByChild("firstLine").equalTo(firstLine).once("value", function(snapshot) {
      snapshot.forEach(function(child) {
        currentProperty = child.key;
        console.log(currentProperty);
      });
    });
}

When the function is fired, it saves the value into the variable but when I access it on another page the value has gone. I've tried using the following method:

window.onload = function() {
    var currentProperty = 'nothing'
    localStorage.setItem("prop", currentProperty);
}
function goTo(ele){
    var firstLine = ele.getAttribute('value');
    var user = firebase.auth().currentUser;
    var ref = firebase.database().ref().child("users").child(user.uid).child('rentingAddresses');

    ref.orderByChild("firstLine").equalTo(firstLine).once("value", function(snapshot) {
          snapshot.forEach(function(child) {
          currentProperty = child.key;
          console.log(currentProperty);
      });
    });
}

But it doesnt seem to work either. Is there any other way to retain the value once I leave the page containing the function?

TYIA.

Answer 1

There are a few problems in your code:

1. You're never setting the value that you read from the database into local storage.
2. You're never reading the value from local storage in the code you provided.

setting the value that you read from the database into local storage

You're only setting the value to local storage once in:

window.onload = function() {
  var currentProperty = 'nothing'
  localStorage.setItem("prop", currentProperty);
}

This means that every time the page loads you set prop='nothing' in local storage. Nothing else ever happens.

You'll probably also want to write the value that you read from the database into local storage. In that case, you should do so in the callback from your once("value" handler:

ref.orderByChild("firstLine").equalTo(firstLine).once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    currentProperty = child.key;
    localStorage.setItem("prop", currentProperty);
  });
});

With this change you'll be updating the local storage to the value that you read from the database.

reading the value from local storage in the next page

You'll need to read the value back from local storage in the next page. Given the code you've already shown, I expect you'll do this with something like:

window.onload = function() {
  var currentProperty = localStorage.getItem("prop");
  // TODO: do something with currentProperty
}

Note that could also simply re-read the value from the database and using it:

ref.orderByChild("firstLine").equalTo(firstLine).once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    currentProperty = child.key;
    // TODO: do something with currentProperty
  });
});