Styling a modal popup using session storage in CSS

Question

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link:

Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated how to save email input into session storage:

(function () {
    var text = document.getElementById('email');
    text.addEventListener('keyup', function () {
        sessionStorage.text = text.value;
    }, false);
 });

However, when attempting to display the stored value on a different page (not within the modal popup), it doesn't seem to work. The text does not appear as expected.

document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;

I am starting to wonder if there are specific considerations to keep in mind when dealing with modal popups that perhaps I have overlooked?

Edit:

One important detail I forgot to mention is that the second line of code is executed in a separate tab or window, which could possibly impact its functionality. Additionally, I encountered these errors: "TypeError: document.getElementById(...) is null" and "ReferenceError: $ is not defined."

Based on feedback from others, it appears that performing this action from a popup window may not be possible. I am now exploring alternative methods such as sending the information back to the parent window, where the text can then be saved into session storage. Any suggestions or insights would be greatly appreciated!

javascript html css

Answer 1

Answer №1

The innerHTML assignment for the 'storage' element was moved inside the keyup listener and an anonymous function was called immediately:

<input id="email" type="text">
<div id="storage"></div>

<script>

(function () {
    var text = document.getElementById('email');
    text.addEventListener('keyup', function () {
        sessionStorage.text = text.value;
        document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;
    }, false);
}());

</script>

Check out a live example here: http://jsfiddle.net/BloodyKnuckles/e6B6x/

Answer 2

The innerHTML assignment for the 'storage' element was moved inside the keyup listener and an anonymous function was called immediately:

<input id="email" type="text">
<div id="storage"></div>

<script>

(function () {
    var text = document.getElementById('email');
    text.addEventListener('keyup', function () {
        sessionStorage.text = text.value;
        document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;
    }, false);
}());

</script>

Check out a live example here: http://jsfiddle.net/BloodyKnuckles/e6B6x/

Answer 3

Answer №2

To retrieve web storage from an open window object, simply use the handle associated with it.

var newWin = window.open('http://www.example.com', 'myNewWindow');
newWin.localStorage.myData = 'bar';

Answer 4

To retrieve web storage from an open window object, simply use the handle associated with it.

var newWin = window.open('http://www.example.com', 'myNewWindow');
newWin.localStorage.myData = 'bar';

Answer 5

Answer №3

After implementing your code, I can confirm that the JavaScript is functioning properly on my end (I tested it using alert(text.value)).

Instead of storing the input value directly into a session, consider placing it in a hidden element and retrieving it from there. Also, when using the code "document.getElementById('storage').innerHTML", remember to use "document.getElementById('storage').value" if the element "storage" is an input box.

Answer 6

After implementing your code, I can confirm that the JavaScript is functioning properly on my end (I tested it using alert(text.value)).

Instead of storing the input value directly into a session, consider placing it in a hidden element and retrieving it from there. Also, when using the code "document.getElementById('storage').innerHTML", remember to use "document.getElementById('storage').value" if the element "storage" is an input box.

Answer 7

Answer №4

If you're searching for a way to store data locally in the browser, you can use window.localStorage. This allows you to save and retrieve objects such as null, arrays like [0, 1, 2], key-value pairs like {'key': 'value'}, or even assign the localStorage object to a variable like

var fromStorage = window.localStorage

. This is helpful for persisting collections of data such as lists, sets, or maps.

It's important to note that unlike Cookies, data stored in localStorage is not automatically sent to the server with each request. localStorage is specific to the browser and can have a longer lifespan and capacity depending on the browser's settings.

Answer 8

If you're searching for a way to store data locally in the browser, you can use window.localStorage. This allows you to save and retrieve objects such as null, arrays like [0, 1, 2], key-value pairs like {'key': 'value'}, or even assign the localStorage object to a variable like

var fromStorage = window.localStorage

. This is helpful for persisting collections of data such as lists, sets, or maps.

It's important to note that unlike Cookies, data stored in localStorage is not automatically sent to the server with each request. localStorage is specific to the browser and can have a longer lifespan and capacity depending on the browser's settings.

Styling a modal popup using session storage in CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

inSession variable in express: set to false

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

What steps are involved in developing a quiz similar to this one?

React Router 4 - Optimizing Component Refresh by Remounting Instead of Re-Rendering

Personalize the appearance of your stackLabels in Highcharts with dynamic customization options

What could be causing the issues I am encountering while using IE8?

An issue arises when request.body appears blank within the context of node.js, express, and body

Tips for maintaining the current route in Vue.js after a page refresh while running the Vue.js project in development mode on a specific port?

Leveraging scanner-js within an Angular2 environment

Using TypeScript with ReactJS

What is preventing me from setting the height of a span to 0 pixels?

Exploring the getServerSideProps function in Next.js with a loop

Utilizing the dollar shorthand for jQuery in conjunction with Selenium

The subsequent middleware in express next() is failing to trigger the next middleware within the .catch() block

Encountering an issue with the `className` prop not matching when deploying to Heroku, yet the functionality works perfectly when testing locally

submitting URL from dropdown menu without using the 'submit' button

Tips for retrieving the final element from a corrupt JSON string using JavaScript

Unlocking the power of AJAX to retrieve PHP responses

Tips for making sure the Button component in material-ui consistently gives the same ID value for onClick events

The image failed to load in React/Express