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

Scroll overflow can be hidden

Is there a way to turn off Emmet's CSS Abbreviations feature in Sublime Text 2?

"Finding the Perfect Alignment: How to Center Legends in Firefox

What methods can I use to minimize the frequency of the blue box appearing around text?

Display a loading animation before the page loads upon clicking

The implementation of CSS in one React component has an impact on the functionality of the Ant Design Select component in

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Retrieving input values with JQuery

Place the item at the top of the list before scrolling downwards

Having trouble accessing portlet resource URL from JavaScript in Liferay 6.2

Most effective method to verify if mutation observer meets specific criteria

Tips for using jQuery to slowly change a CSS property to "auto"

In the production mode, Nuxt styles may not be properly applied

Monitoring separate upload progress within $q.all() in AngularJS

SQL Delete rows from Table

What is the best way to integrate Halfmoon's JS from npm into my current code using Gulp?

Ways to synchronize countdown timer on different tabs using the same link

What are the steps for generating website endpoints using search query outcomes?

Error occurred in AngularJS service due to incorrect data type

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?