CSS modal popup session storage

Question

I've made a modal popup using CSS by following this tutorial: http://www.script-tutorials.com/css3-modal-popups/

I'm wondering how to store the value that someone enters in a textbox as session data? I saw on another tutorial this code, say I wanted to get the email that someone typed and put it in session storage:

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

For some reason, it doesn't seem to be working when I try the code below (on another page, not in the modal popup itself), the text doesn't show up

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

Is there some special considerations when working with modal popups that I'm missing?

Edit:

I forgot to mention that the second line of code is in another tab/window, if that makes a difference. And I get these errors: TypeError: document.getElementById(...) is null ReferenceError: $ is not defined

From the comments I can gather so far, it seems like you can't do this from a popup window.. I am wondering if there is a cheat way of sending it back to the parent window and then from the parent window, save the text in session storage?

Is the second page in another tab / window? Are you getting any errors in the console on any of the pages? Can you access `sessionStorage.text` from the console on any of the pages ? — Catalin Deaconescu, May 21 '14 at 14:12
Maybe this will help http://stackoverflow.com/questions/5523140/local-storage-vs-session-storage — Crystal, May 21 '14 at 14:13
@Catalin yes it's in another window.. and I get these errors: TypeError: document.getElementById(...) is null ReferenceError: $ is not defined — SonicProtein, May 21 '14 at 14:16
@SonicProtein then i think you should try out `localStorage` instead of `sessionStorage`, as the first one persists over windows/tabs/browser exits and the second one only works within the same window (but over multiple pages). The implementation whould be the same. — Catalin Deaconescu, May 21 '14 at 14:19
@Catalin do you mean the problem is because the popup is in another window? So is there no way of storing some value in the sessionStorage coming from a popup? I have some reason to avoid using localStorage.. — SonicProtein, May 21 '14 at 14:28
@SonicProtein from what i know yes. You could try using cookies if you can't use localStorage. Or send the data to the server (via ajax most likely) and get it back from there on the second page. — Catalin Deaconescu, May 21 '14 at 14:34
@SonicProtein you could try it out with localStorage with the code you have right now, just to check if that's the issues or not, and proceed to a fix from there. — Catalin Deaconescu, May 21 '14 at 14:35

J.Wells · Answer 1 · 2014-05-21T14:59:06.360

2

if you have a handle to the open window object, you can access its web storage via the handle.

var win = window.open('http://my.foo.bar/', 'myWindowNameHere');
win.sessionStorage.myThing = 'foo';

edited May 21 '14 at 14:59

answered May 21 '14 at 14:13

J.Wells

1,749
12
13

Everything you posted is true, but from the question we can see that both the setting of a variable and recovery of it from `sessionStorage` are in order – Catalin Deaconescu May 21 '14 at 14:15
Provided that the second window opens up the first, this is the best solution for using 2 distinct windows and sessionStorage. – Catalin Deaconescu May 21 '14 at 15:03
there is also a potential for same origin concerns when trying access web storage across windows. – J.Wells May 21 '14 at 15:05

score 2 · Answer 2 · answered May 21 '14 at 14:15

I pulled the 'storage' innerHTML assignment into the keyup listener and immediately invoked the anonymous function:

<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>

Here's a working example: http://jsfiddle.net/BloodyKnuckles/e6B6x/

score 1 · Answer 3 · answered May 21 '14 at 14:18

I tried your code and your java script is working correctly at my end(i used code alert(text.value)).

And instead of saving the entered value directly into session, write that value into hidden element and try to get it from there. And in code "document.getElementById('storage').innerHTML", please use "document.getElementById('storage').value" if element "storage" is an input box.

score 0 · Answer 4 · answered May 21 '14 at 14:16

I think what you're looking for is window.localStorage: you may look up the ability the browser supports it and then can write and retrieve object instances like: window.localStorage = null;, window.localStorage = [0, 1, 2];, window.localStorage = {'key': 'value'}; or var fromStorage = window.localStorage;. So you may write Collections like lists, sets or maps (objects) here if you have more data to persist.

Attention: unlike Cookies localStorage data is not by default exchanged with the communicating server on any request -- localStorage is by default in the browser only. But the lifetime and size may be longer depending on browser implementation/configuration.

`window.localStorage = null;, window.localStorage = [0, 1, 2];, window.localStorage = {'key': 'value'};` will not work to store anything. Moreover, localStorage and sessionStorage will only store the string primitive of whatever you give it. In order to store/retrieve objects or arrays, they must first be stringified/parsed. Finally, window.sessionStorage is also a thing. — J.Wells, May 22 '14 at 15:58

CSS modal popup session storage

4 Answers4