1 Replies - 677 Views - Last Post: 27 November 2012 - 12:18 PM

#1 bmckinn8  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 11-September 11

sessionStorage store from page to page

Posted 27 November 2012 - 11:57 AM

I have a simple shopping cart page where you can drag and drop images into a shopping cart. I'd like to use sessionStorage to save the images that are placed in the cart. Then, when the customer presses the " Check Shopping Cart" button I'd like it to redirect to the other page and use the information saved in sessionStorage to display the selected images where I currently have an image as a placeholder. I am very new to HTML5 and I've read a few tutorials, but I still don't have a clue how to do this. Any help would be greatly appreciated.

Page where customer selects images to put in shopping cart
<!DOCTYPE HTML>
<html>
<head>
	<!--TITLE-->
	<title>HTML5 and CSS3</title>
	
	<!--STYLES-->
	<style type="text/css">
	#div1{width:400px;
	height:140px;
	padding:10px;
	border:1px solid #aaaaaa;
	}
	</style>
	
	<!--SCRIPTS-->
	<script>
	function allowDrop(ev)
	{
		ev.preventDefault();
	}

	function drag(ev)
	{
		ev.dataTransfer.setData("Text",ev.target.id);
	}

	function drop(ev)
	{
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
	</script>

</head>
<body>

<p>Drag the images that you would like to order into your shopping cart.</p>

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend>Shopping Cart</legend>
</fieldset>
<br>
<img id="drag1" src="images/jadams.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag2" src="images/jefferson.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag3" src="images/madison.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<img id="drag4" src="images/washington.gif" draggable="true" ondragstart="drag(event)" width="100" height="auto">
<br>
<input type="button" value="Cancel" onclick=""/>
<input type="button" value="Check Shopping Cart" onclick=""/>
</body>
</html>



Page that displays the selected images
<!DOCTYPE HTML>
<html>
<head>
	<!--TITLE-->
	<title>View Shopping Cart</title>
	
	<!--STYLES-->
	<style type="text/css">
	#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
	</style>
	
	
</head>
<body>

<p>Here are the portraits that are in your shopping cart:</p>
<img src="images/jadams.gif" width="100" height="auto">
<br>
<p>Are you ready to <a href="">place your order</a>? Or do you want to <a href="">modify it</a>?</p>
</body>
</html>

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: sessionStorage store from page to page

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,238
  • Joined: 08-June 10

Re: sessionStorage store from page to page

Posted 27 November 2012 - 12:18 PM

you donít save the images as image data in sessionStorage, it totally suffices to save the image URL or even image (resp. item) ID. reason: sessionStorage can only save serialised data (plain data like strings and numbers).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1