JavaScript "localStorage"

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

JavaScript "localStorage"

Post 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.
Lou
Say what you will about Sisyphus. He always has work.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: JavaScript "localStorage"

Post 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?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: JavaScript "localStorage"

Post 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
Attachments
testZip.zip
(1.36 KiB) Downloaded 168 times
Lou
Say what you will about Sisyphus. He always has work.
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: JavaScript "localStorage"

Post by Lou »

Occurs to me editing the post above does not trigger "new post"
Lou
Say what you will about Sisyphus. He always has work.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: JavaScript "localStorage"

Post 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
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: JavaScript "localStorage"

Post 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.
Lou
Say what you will about Sisyphus. He always has work.
Post Reply