html - How can I display a Javascript prompt once on website load? - Stack Overflow

admin2025-04-21 0

I have a javascript prompt that executes when I open my website for the first time. The basic function of this prompt is to ask the user for their name, and then insert it into a header I.E. "Hello, 'user'!" I have multiple pages on my website, and whenever I navigate to a different page and then navigate back to the home page, the prompt is displayed again, asking the user the same question over and over. Is there any way to have the prompt display only once on the first load of the website, and then keep the user's name in a variable until they close the website?

Here is my javascript:

function askName() {
    let username = prompt("To make your time on this website better, please enter your name.");
    if (username != null) {
        document.getElementById("userpara").innerHTML = "Hello, " + username;
    } else {
        document.getElementById("noUser").innerHTML = "Wele, Stranger!";
    }
}

And here is my Html:

<h1 id="userpara" style="text-align: center;"></h1>
<h1 id="noUser" style="text-align: center;"></h1>

To execute the function on page load, I used the onload function in the body tag in html like this:

<body onload="askname()">
...
</body>

Feel free to correct me on any of my code as well, since I'm still learning :)

Here is my javascript:

function askName() {
    let username = prompt("To make your time on this website better, please enter your name.");
    if (username != null) {
        document.getElementById("userpara").innerHTML = "Hello, " + username;
    } else {
        document.getElementById("noUser").innerHTML = "Wele, Stranger!";
    }
}

And here is my Html:

<h1 id="userpara" style="text-align: center;"></h1>
<h1 id="noUser" style="text-align: center;"></h1>

To execute the function on page load, I used the onload function in the body tag in html like this:

<body onload="askname()">
...
</body>

Feel free to correct me on any of my code as well, since I'm still learning :)

Share Improve this question asked Oct 3, 2019 at 2:20 Nick W 231 silver badge5 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Try using sessionStorage:

function askName() {
    let username = sessionStorage.getItem('username');

    if (username === null) {
        username = prompt("To make your time on this website better, please enter your name.");
    }

    if (username != null) {
        document.getElementById("userpara").innerHTML = "Hello, " + username;
        sessionStorage.setItem('username', username);
    } else {
        document.getElementById("noUser").innerHTML = "Wele, Stranger!";
    }
}

sessionStorage is different from localStorage in that sessionStorage is wiped whenever you close the window/tab, which is what you want. localStorage stays until a user clears the cache or you remove the data through script.

There are a variety of ways to persistently store information on a client's web browser:

Cookies
- Sends the information to the web server.
- Used for a tiny amount of data
- Can be inconvenient to work with, usually requires some parsing.
- Data can persist upon closing the web browser, or it can be automatically deleted when it closes, by using a session cookie.
localStorage/sessionStorage
- Information stays on the client, doesn't automatically get sent to the web server
- Easy to work with
- Generally used with a small amount of data
- sessionStorage data gets deleted upon closing the browser, while localStorage data persists
- a new instance of sessionStorage data is created when a new tab or window is opened, so other tabs/windows can't access the same sessionStorage data
IndexedDB
- Information stays on the client, doesn't automatically get sent to the web server
- Allows storing large amounts of data
- Works asynchronously
- Complicated to use
- Data persists upon closing the browser

Probably the easiest way to do this is by using localStorage:

function askName() {
  let username = localStorage.getItem('username');
  if (!username) {
    username = prompt("To make your time on this website better, please enter your name.");
  }
  if (username != null) {
      document.getElementById("userpara").innerHTML = "Hello, " + username;
      localStorage.setItem('username', username);
  } else {
      document.getElementById("noUser").innerHTML = "Wele, Stranger!";
  }
}

Note that the information doesn't get cleared upon closing the browser (probably the closest thing to do that is a session cookie, but it es with the concerns of using cookies). Alternatively you can just use sessionStorage, if you don't need other tabs/windows accessing the same data.

save the value to localStorage and check next time if value there in localStorage

function askName() { 
var user=localStorage.getItem('Username');
if(user){
document.getElementById("userpara").innerHTML = "Hello, " + user; 
}
else{
let username = prompt("To make your time on this website better, please enter your name."); if (username != null) { 
user=localStorage.setItem('Username', username)
document.getElementById("userpara").innerHTML = "Hello, " + username; 
} else { 
document.getElementById("noUser").innerHTML = "Wele, Stranger!"; 
}} }

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745242086a292072.html

htmlHow can I display a Javascript prompt once on website loadStack Overflow

最新回复(0)