Create a text input that allows a user to enter a username Create a button that when clicked stores that username in sessionStorage Create another button that when clicked pulls the username back from session Storage
Algorithm: User Input and sessionStorage
1. Start
2. Create an HTML document.
3. Add the necessary HTML structure:
a. Create an input field with an id of "username" and a placeholder text.
b. Create two buttons with ids "storeButton" and "retrieveButton".
c. Create a paragraph element with an id of "output".
4. Add a script section inside the HTML document.
5. Inside the script section, define the following functions:
a. `storeUsername` function:
i. Get the value of the input field with the id "username".
ii. Check if the entered username is not empty.
iii. If the username is not empty, store it in sessionStorage with the key "username".
iv. Display a message indicating that the username has been stored in sessionStorage.
v. If the username is empty, display an error message.
b. `retrieveUsername` function:
i. Retrieve the username from sessionStorage using the key "username".
ii. Check if a username was found in sessionStorage.
iii. If a username is found, display it on the page.
iv. If no username is found, display a message indicating that no username is stored in sessionStorage.
6. Add event listeners to the "storeButton" and "retrieveButton" elements:,a. Create an input field with an id of "username" and a placeholder text.
b. Create two buttons with ids "storeButton" and "retrieveButton".
c. Create a paragraph element with an id of "output".
4. Add a script section inside the HTML document.
5. Inside the script section, define the following functions:
a. `storeUsername` function:
i. Get the value of the input field with the id "username".
ii. Check if the entered username is not empty.
iii. If the username is not empty, store it in sessionStorage with the key "username".
iv. Display a message indicating that the username has been stored in sessionStorage.
v. If the username is empty, display an error message.
b. `retrieveUsername` function:
i. Retrieve the username from sessionStorage using the key "username".
ii. Check if a username was found in sessionStorage.
iii. If a username is found, display it on the page.
iv. If no username is found, display a message indicating that no username is stored in sessionStorage.
6. Add event listeners to the "storeButton" and "retrieveButton" elements:
a. When the "storeButton" is clicked, call the `storeUsername` function.
b. When the "retrieveButton" is clicked, call the `retrieveUsername` function.
7. End
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 3 images
