Page 1 of 1

JavaScript "localStorage"

Posted: Wed Nov 13, 2019 8:31 pm
by Lou
What started out to be a simulator "for me to play with" has now turned into something more (programmer's nightmare!) I am trying to cleanup the GUI without lots of rewrite/ restructure. I have one PHP script that initializes starting conditions, opens a second browser window to display graphics, and when the user presses the button, goes to a second PHP script to run the simulation. At the end, control is returned to the first script to run again or exit. On exit I want to close the second graphics window. Closing the window with my JavaScript is the problem

Code: Select all

<!-- Functions/scripts to create/close 2nd window -->
<script type="text/javascript">
	var displayWindow;
	function openWin() 
	{
		displayWindow = window.open("display.html", "Disply", "fullscreen=yes,left=450,top=250,width=1150");
		if (typeof localStorage == 'undefined')
		{
			document.getElementById("tst").innerHTML = "NO Local Storage";
		}
		else
		{	document.getElementById("tst").innerHTML = "Local Storage";
		}
		localStorage.setItem("savedWindow", displayWindow);
	}
		
	function closeWin()
	{
		var w;
		w = localStorage.getItem("savedWindow");
		w = displayWindow;
		document.getElementById("tst2").innerHTML =  "display is " + w;
		w.close();   // Closes the second window
	}
		
</script>
The two javascripts are called with

Code: Select all

<!--	open window for graphics -->
	<div style='padding-bottom: 10px;'>
		<button onclick="openWin()">Create Second window</button>&ensp;<a href='../doc/CreatenewWindow.html' target='_blank'><img src='./icon/question.gif' height='13' width='12' alt='help Link'></a>
	</div>

<!-- close graphics window -->
	<div style="margin-top: -18px; margin-left: 120px; float: left">
		<form action="#" method="GET">
			<input onmousedown ="closeWin()" type=submit value='End Train Thing'>&ensp;<a href='../doc/EndTrainThing.html' target='_blank'><img src='./icon/question.gif' height='13' width='12' alt='help Link'></a>
		</form>
	</div>
{Normally the form action is a call to a clean-up script that gets ride of all $_SESSION data and returned to the calling menu, NOT action=# }

All works as is except. With the code above if I open the window <Create Second window> and then close the window <End Train Thing> WITHOUT running the simulator (going to a different script) all is fine. In the function openWin() the window object tag is saved in the JavaScript variable displayWindow. In closeWin() displayWindow is moved to the variable w and the second window is closed.

Notice this does not use localStorage.setItem() or localStorage.getItem() AND if I go to the simulator script and return this doesn't work
IF I comment out the the line in closeWin()

Code: Select all

	w = displayWindow;
displayWindow is "stored" and then retrieved. However the window is not closed.

I have tried JavaScript localStorage, sessionStorage and cookies same results. The troubleshooting lines are always
Local Storage

display is [object Window]
I chose two windows vs frames so that I could move the simulator graphics window to a second screen, leaving room for a "simulator tracing" window and CSS HTML validator ;-) I assumed that the window tag held in the JavaScript variable is lost when a different PHP script is started. Script one starts script two, and two returns to one using a version of

Code: Select all

	header('Location: train_loop.php');
If it weren't for the GUI all would be fine. All suggestions/education welcome.

Re: JavaScript "localStorage"

Posted: Sat Nov 16, 2019 5:53 pm
by Albert Wiersch
Hi Lou,

Well this isn't my area of "expertise" but I may be able to "play" with it a little and see if I can figure anything out. :D

Can you create a small ZIP file of all the files needed (PHP, HTML, CSS, JS, etc) to reproduce/simulate the problem and attach the ZIP file to a forum reply?

Re: JavaScript "localStorage"

Posted: Sat Nov 16, 2019 9:14 pm
by Lou
That I can. dinner first.

In the attached commenting out line 62 will change witch variable is used the local javascrpt var displayWindow or the version of the variable stored is session storage.

The first works the second does not. Thanks for any insight

Re: JavaScript "localStorage"

Posted: Sun Nov 17, 2019 1:19 pm
by Lou
Occurs to me editing the post above does not trigger "new post"

Re: JavaScript "localStorage"

Posted: Mon Nov 18, 2019 8:45 am
by Albert Wiersch
Thank you Lou. I took a look.

I think the problem is that localStorage and sessionStorage only store string values. When you try to save an object to it (like with sessionStorage.setItem("savedWindow", displayWindow) ), the literal string "[object Window]" is saved and not the object that you need.

More:
https://developer.mozilla.org/en-US/doc ... calStorage

Re: JavaScript "localStorage"

Posted: Mon Nov 18, 2019 10:14 am
by Lou
Thanks Albert, that is critical
The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
The same is true with cookies, even using escape.
On the search of a solution that works. Of course the user can be prompted to close the second window. I was trying to dress up the GUI

As I said in my OP, this started as a toy for me to play with and has evolved into something to put online as part of a larger project, so the GUI was/is clunky.