Why doesn't JavaScript pull values from localStorage successfully?

I am trying to update some early JS in an old app. This is a wallpaper app. Clicking on a thumbnail makes the wallpaper appear in a new page, and the user uses their phone to capture the screen to use it. Tapping on the image returns to the previous page of thumbnails.

The JS pulls the image information when onclick, which triggers a function that places that information into localStorage, then calls a function to open a new page, wp_Show.html. (wp = wallpaper.) wp_Show.html pulls the information from localStorage to populate the page.

For some reason the image’s folder name and image name isn’t being pulled from localStorage. Both are returned as null. There is no error message in the console, but Firefox’s Inspector shows src=null/null.jpg.

	<script>
	
	function grabFilename(filename, size, color) {
	// var filename, size, color;
	if (color.length < 1) {color = "black";}
		var mainFolder = "0buggies/0racing-buggies"; // URL to this page
		var mainHtml = "/0racing-buggies.html"; // this page
		localStorage.setItem('wpMainFolder', mainFolder);
		localStorage.setItem('wpMainHtml', mainHtml);
	    localStorage.setItem('wpName', filename);
//	    localStorage.setItem('screenSize', size);
//	    localStorage.setItem('bgColor', color);
	    window.location="../../wp_Show.html";
	}
	</script>

In wp_Show.html:

<script>	
	var mainHtml = localStorage.getItem('wpMainHtml'); // /0racing-buggies.html
	var folder = localStorage.getItem('wpMainFolder'); // 0buggies/0racing-buggies
	var image = localStorage.getItem('wpName'); //2015_Race-offroad1-sm
/*	var size = localStorage.getItem('screenSize'); // 640
	var bgColor = localStorage.getItem('bgColor'); // black

	var bColor = document.getElementById("bodyColor");	
	bColor.style.backgroundColor = bgColor;
*/	
	var output = document.getElementById("output");	
	output.innerHTML = "<a href='" + folder + mainHtml + "'><img alt='' src = '" + folder + "/" + image + ".jpg' width='100%' /></a>";

</script>

Immediate first question:
Are these pages on the same domain?

EDIT: Ah, now that you show the source, i can see it is. Okay…

You see null? What does the console think is in folder?

<a href="nullnull"><img alt="" src="null/null.jpg" width="100%"></a>

Looks like wp_Show.html code should be adjusted to include a slash:

+ folder + "/" + mainHtml +

… but no image appears with that change.

	console.log(mainHtml); // null
	console.log(folder); // null
	console.log(image); // null

So getItem isn’t working at all.
HTML:

		<div class="tile">
			<a href="#" onclick="grabFilename('2015_Race-offroad1-sm')">
				 <img src="../../../thumbs/2015_Race-offroad2-sm.png" alt="2015 Race, offroad"/>			
				 <div class="title">2015 Race, offroad</div>
			</a>
		</div>

bleh, relying on undefined parameters :stuck_out_tongue:

The only thing that’s jumping to mind is if you’re accidentally changing protocols (from http to https) in your relocation…

This is all being done in my computer. Hasn’t been uploaded yet.

mmm… I think i smell a cause coming on.

Does your browser bar say localhost, or 127.0.0.1? Whichever it says, try the other. And if possible/safe, try uploading it.

localhost does all sorts of quirky things with javascript and security settings…

It doesn’t say either. It just gives the URL to the computer’s folder. These are plain HTML files. No PHP or databases used.

ahhh yeah, that’ll almost certainly do it.

file:// protocol addresses are usually not allowed to access the localstorage. I think you can override that setting depending on your browser, but it’s generally not a good idea to do so.

1 Like

I uploaded it to the server and the pages are working. I guess you are right. However, it had always worked on my computer before. Maybe the latest Windows upgrade changed things so it is more secure.

I’ll consider this resolved.