Solved

Pass HTML5 localStorage variable to PHP MySQL

Posted on 2011-09-13
9
4,468 Views
Last Modified: 2012-05-12
I need to pass an HTML5 localStorage variable to PHP/MySQL. Within HTML5 I create localStorage.txtItem. On a php page I am trying to retrieve the localStorage.txtItem into a variable so I can use in my MySQL SELECT statement. See followin snipet:

<?php

$item = (localStorage.txtItem);
                        
$conn = mysql_connect("localhost", "X", "X") or die(mysql_error());
            mysql_select_db("test");
            
$sql = "SELECT price FROM items WHERE id = '$item'";
$result = mysql_query($sql, $conn) or die(mysql_error());

Any code examples would be greatly appreciated.
0
Comment
Question by:kbios
9 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 36529779
I think you have the order of things backwards.  PHP is a scripting language that generates HTML.  HTML cannot talk to PHP except through the defined interfaces of the HTTP protocol, such as GET and POST.

So the solution I would recommend is to have PHP generate the HTML string that will be put into localStorage.txtitem.  PHP can keep this variable in the script and use it in the query just like you have shown above.
0
 
LVL 14

Expert Comment

by:Scott Madeira
ID: 36529878
If the itemID that you want to retrieve is dynamically generated on the client-side (therefore you have no prior knowledge of it in your PHP script) then you will need to do something on the browser side to retrieve the value and send it to the server via AJAX.   You may be able to create a Javascript event that fires when appropriate to send that data to a php script and then you can process it.

Without knowing what you are trying to do or the exact use case it is difficult to give any additional information.
0
 

Author Comment

by:kbios
ID: 36529937
Is there a way to set my php variable using the GET that you mentioned? Something like $item = GET('localStorage.var')? I'm a newbie with this; just trying to piece it all together:)
0
 

Author Comment

by:kbios
ID: 36529963
the itemID is dynamically generated on the client-side. the itemID is then stored in a localStorage variable. I can retreive this localStorage variable within other HTML pages. all I simply want to do is somehow pass this variable on to mysql so the SELECT statement 'SELECTS' that itemID.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 36529999
the itemID is dynamically generated on the client-side -- please show us the exact code that generates the itemID, thanks.
0
 

Author Comment

by:kbios
ID: 36530177
The code displays a text box. A QR Code is scanned that contains a URL. At the end of the URL is a pound sign followed by the itemID. (www.xyz.com/xxxxxxxxxxxxxxxxxxxx#1234). The SAVE button launches the javascript that parses the itemID from the textbox and creates the localStorage.txtItem variable. I then launch the .php attempting to set a variable within the php that will reteive the localStorage variable.

...
<form action="">
  <fieldset>
  <input type="text" id=txtitem size=50 autofocus/><br />
  <input type="button" value=" Save " onClick="setValue()"/>
  </fieldset>      
</form>      
            
<script type="text/javascript">
   function setValue() {
     var txtitem = document.getElementById("txtitem");
     var item = txtitem.value;
     var x = item.indexOf("#");
     var y = item.length;
     var z = item.substring((x + 1),y);
     localStorage.txtItem=(z);
     window.top.location = "getdbinfo.php";
   }
</script>
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 36530216
This might work... Pidgin Code

window.top.location = "getdbinfo.php/xxxxxxxxxxxxxxxxxxxx#1234";

But why not just submit the form directly, like this?
<form action="">
  <fieldset>
  <input name="itemID" type="text" id=txtitem size=50 autofocus/><br />
  <input type="submit" value=" Save " onClick="setValue()"/>
  </fieldset>      
</form>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 250 total points
ID: 36530280
try the code below:
<form action="getdbinfo.php" method="post" onsubmit="return setValue()">
  <fieldset>
  <input type="text" id=txtitem size=50 autofocus/><br />

<input type="hidden" name="hiddenItem" id="hiddenItem" value="" />
  <input type="submit" name="Submit" value=" Save " />
  </fieldset>      
</form>      
            
<script type="text/javascript">
   function setValue() {
     var txtitem = document.getElementById("txtitem");
     var item = txtitem.value;
     var x = item.indexOf("#");
     var y = item.length;
     var z = item.substring((x + 1),y);
     localStorage.txtItem=(z);
//this updates the hiddenField so that if you can retrieve it via POST
document.getElementById("hiddenItem").value=z;
return true;
   }
</script>

in getdbinfo.php, you can use:
$_POST['hiddenItem']

to retrieve a copy of the value you just stored in local storage:

$conn = mysql_connect("localhost", "X", "X") or die(mysql_error());
mysql_select_db("test") or die( mysql_error() );

$item=mysql_real_escape_string($_POST['hiddenItem']);

$sql = "SELECT price FROM items WHERE id = '$item'";

Open in new window

0
 

Author Closing Comment

by:kbios
ID: 36530569
Thank you. Your solution solved the problem. However, I would like to ask a followup question. With this test I am only sending over 1 field. What would be needed to send over multiple fields? Thank you again for your help.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
This article discusses four methods for overlaying images in a container on a web page
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now