Having trouble getting data back from local storage

I had this question after viewing How to save and retrieve localstorage with a DB.
I have tried to incorporate your script into my example script, changing some of the names to suit. I have undoubtedly not done it correctly. I have been trying to get something similar to work for about 3 weeks, but my javascript knowledge is so poor that I really need help. The ultimate aim is to get the data stored in local storage (I do not have any problem putting it there), and having it back into a PHP sript so that I can use it as a normal string. The reason is that the form will be filled in remotely on a tablet, and if the internet connection fails the data can be saved in the browser and got back when the signal returns. I have put the script for testing here: http://www.jhw1.com/local_storage.php
John WakefieldRetiredAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundCommented:
Without looking into this to far I see there is no url for you AJAX call.  All of your php needs to be in a stand alone page.  It can't post to itself.  Meaning, there needs to be a page in the URL.

$.ajax({
	type: 'post',
	url: '//  HERE CAN NOT BE EMPTY',
	data: {number: num},
	success: function (result) 
	{
		console.log(result);
	},
	error: function (result)
	{
		console.log(result);
	}
});

Open in new window

John WakefieldRetiredAuthor Commented:
OK, thanks. I have inserted the URL of the page like this... url: 'http://www.jhw1.com/local_storage.php' and it still doesn't return the data. Are you saying I should have a separate page for the PHP? I have split the page int 2.
local_storage.php
get_local_storage.php
rgranlundCommented:
Yes, everything that you want the PHP to do needs to be on another page. You seem to be passing the Number correctly.  However, now that I re-read your question, I may not have a complete grasp on what you are trying to do.  Store a session variable locally?
SolarWinds® IP Control Bundle (IPCB)

Combines SolarWinds IP Address Manager and User Device Tracker to help detect IP conflicts, quickly identify affected systems, and help your team take near instantaneous action. Help improve visibility and enhance reliability with SolarWinds IP Control Bundle.

John WakefieldRetiredAuthor Commented:
Not session variable. I just want to retrieve the storage data so thet I can use it in a php document. I can get it back using a javascript but that is no good. I want to repopulate the form so that I can carry on working with it. My javascript knowledge is bad, so I cannot see how to transfer to php.
Dave BaldwinFixer of ProblemsCommented:
I believe you have to use javascript to get the data to send it back to PHP.  PHP has no access to localstorage in someone's browser.  More info:  https://www.w3schools.com/html/html5_webstorage.asp
John WakefieldRetiredAuthor Commented:
Thanks but I don't understand javascript. I was hoping that someone would just give me the code to slot in to my page. I have looked at many websites for the answer and they just tell me a snippet of javascript, but I have no idea how to incorporate it.
RobOwner (Aidellio)Commented:
Hi,

What's missing is the jQuery library.  The $.ajax requires it to be included so put the following in your <head> tags

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

That will get the page sending the variable back to your server.

Once that's working, I suggest working on a state machine, which is just a fancy way of doing a flowchart of how the site should work e.g. when offline as well as how to detect when it is back online
Julian HansenCommented:
Just a note on localStorage - it is not secure. Any JavaScript you download to your page can read your localStorage and send the data off to wherever it wants to.

A cookie would be a much better and safer option for moving sensitive data back and forth.

Even with cookies though, you don't want to store actual data but rather tokens the server knows how to convert into the data it needs.
John WakefieldRetiredAuthor Commented:
Thank you. I have changed the page (see attached). It still doesn't show the result, but I wonder if that is because the section for URL actually transfers to the second page. When I insert data it just stays on the same page. I still don't know if the server has the data.
RobOwner (Aidellio)Commented:
Check the console in your developer tools. As that is where the output is going
John WakefieldRetiredAuthor Commented:
The output is supposed to go to the new page I made at the suggestion of rgranlund. It is www.jhw1.com/get_local_storage.php. That is what I put in the URL section. As I know nothing about javascript I assumed that it would transfer to that page after getting the data from local storage.
get_local_storage.php
RobOwner (Aidellio)Commented:
Sorry, expanding on my last comment, the server won't store anything unless you explicitly tell it to eg in a database or a session variable.


I'm on my phone at the moment so I'll check out your site when I'm back at the laptop.
RobOwner (Aidellio)Commented:
Ahhhh, not with Ajax. It's asynchronous. You would need to manually redirect the page once there been a successful connection
John WakefieldRetiredAuthor Commented:
OK, I am happy with storing in a session variable. I was intending to use that anyway to take the data back to the first page, then repopulate the form field(s). How do I do that? I guess the URL will not be the same. (I know how to use session variables! but not how to set them with javascript)
RobOwner (Aidellio)Commented:
ok, i'm back.  

There's a few things to look at here.  The $.ajax doesn't fire as it's not triggered by an event.  It also needs the jQuery library to have loaded before it's able to run.  To do that, it needs to be wrapped in a "ready" function

$(function() {
    $.ajax({
       ... // the rest of your ajax code would go here...
    });
});

However, that said, how I see this working is have the $.ajax triggered initially when the user submits the value (or form).  If the $.ajax succeeds with a connection (the "success" event in the ajax) then the javascript redirects to another page.  If the $.ajax failed (this is captured in the "error" event) then perhaps set off a timer to try the ajax again until the connection succeeds.

e.g.

$(function(){
  $("form").submit(function(e){
    e.preventDefault(); // prevent the form from submitting and refreshing the page
    submitData(e.target.number.value); // instead call our function
  });
});

function submitData(num) {
  $.ajax({
    type: 'post',
    url: 'http://www.jhw1.com/get_local_storage.php',
    data: {number: num},
    success: function (result) 
    {
      console.log(result);
      // redirect to the success page
    },
    error: function (result)
    {
      console.log(result);
      setTimeout(function() {submitData(num);}, 5000); // try again in 5 sec
    }
  });
}

Open in new window


So in the code above, I've created a separate function to do all the ajax work.  That also allows us to call it multiple times as needed.

After preventing the form submitting and reloading the page, we instead call the custom function "submitData".  The ajax tries to submit.  If it's successful then great, if not, then the function is called again in 5 seconds (you could change that to whatever you want).  This would just continue until the connection is restored.

I can see local storage coming into play when the user might close their browser and return to the page later to resume or resubmit their results.  Depending on your application this could interfere with the PHP session but that's really something to worry about later.  What I've provided above is lost once they close their browser.
John WakefieldRetiredAuthor Commented:
This looks promising. However, I slotted your code into the web page and tried it but it doesn't transfer to the second pageI assume it should do so. The page is http://www.jhw1.com/local_storage.php and the recieving page is http://www.jhw1.com/get_local_storage.php.
I am so grateful for the time and trouble you are taking with my problem.
John
Julian HansenCommented:
At the risk of coming late to the party and getting the wrong end of the stick.

Where is your redirect code?

As Rob pointed out - with an AJAX call your redirect has to happen in your JavaScript where you do the AJAX call

function submitData(num) {
  $.ajax({
    type: 'post',
    url: 'http://www.jhw1.com/get_local_storage.php',
    data: {number: num},
    success: function (result) 
    {
      console.log(result);
       // CHECK YOUR RESULT AND REDIRECT IF VALID
       if (result is valid - depends on return type) {
          window.location = 'url to relocate to';
       } 
    },
    error: function (result)
    {
      console.log(result);
      setTimeout(function() {submitData(num);}, 5000); // try again in 5 sec
    }
  });
}

Open in new window

John WakefieldRetiredAuthor Commented:
That is what I kind of thought, but I have no idea how to do it. I can program anything in PHP, but I never use javascript. This will be a first.
John WakefieldRetiredAuthor Commented:
I put that code in place of Rob's but I need to know what to put in the if statement, if (result is valid - depends on return type) {

What is the return type?  

Thanks for being patient with my obvious lack of knowledge.
Julian HansenCommented:
Summarise the process for me - as I understand it is
a) Tablet stores data to local storage because it is offline
b) When it is online it pushes the data to the server
c) The server saves the data and then ...?
John WakefieldRetiredAuthor Commented:
This is just a demo website at the moment. The only thing I need is for the data retrieved from the storage to be converted to a string that I can use to work with in PHP. The idea of saving to a MySQL table would work, or converting it to a session variable. As soon as I have something that I can use the whole javascript will be slotted into a working script.

It is that transition fron javascipt to PHP string that is the stumbling block. It would even be OK to populate the storage data into a form text box. I could then submit the form in PHP and get the data that way.

As you can see, there is no problem saving the data to local storage. The script I used was something I found earlier. I have had many suggestions from various forums for retrieval, but no-one has actually given me the relevant code to do it.

I think I am nearly there!
RobOwner (Aidellio)Commented:
I've setup a jsfiddle to show you how I think it should work: https://jsfiddle.net/rjurd/aeq70y1w/

The code below should work for you though I've had to modify the url and data attributes of the $.ajax to suit your environment

<div id="result"></div>
<form method = "POST" action = "" name="storage_form" id="storageForm">
  <input type="text" name="number" size="10" value="">
  <p><input type="submit" value="Save"></p>
</form>

Open in new window


$(function(){

	// set the inputs if they have been previously stored and not successfully submitted
	$("#storageForm input[type=text]").each(function(i,e) {
  	var _n = localStorage.getItem(e.name);
  	if (_n !== "") {
    	e.value = _n;
    }
  });

	// automatically save the entered information as the user leaves the input
	$("#storageForm input[type=text]").on('blur', function(e) {
  	localStorage.setItem(e.target.name, e.target.value);
  })

  $("#storageForm input[type=submit]").click(function(e){
    e.preventDefault(); // prevent the form from submitting and refreshing the page
    submitData(); // instead call our function
  });
});

function submitData(num) {
  $.post({
    url: 'http://www.jhw1.com/get_local_storage.php',
    data: {
    	$("#storageForm input[type=text]").serializeArray()
    }}).done(function (result) 
    {
      console.log('success');
      console.log(result);
      // clear the localStorage
      $("#storageForm input[type=text]").each(function(i,e) {
      	localStorage.removeItem(e.name);
      });
      // redirect to the success page
      window.location.reload();
    }).fail(function (result)
    {
      console.log("error");
      console.log(result);
      setTimeout(function() {submitData(num);}, 5000); // try again in 5 sec
    });
}

Open in new window

John WakefieldRetiredAuthor Commented:
OK thanks, much appreciated. I have replaced my script with this but I don't see any return from the server. I just need a php string with the retrieved data.  A MySQL input, form text box or session variable containing the data.
RobOwner (Aidellio)Commented:
What does it say in the console when you click the button?
John WakefieldRetiredAuthor Commented:
The local storage section of console shows the key/value OK. That has always been working correctly. I don't see any console feature for showing the server content. I don't think that would be possible.
RobOwner (Aidellio)Commented:
I don't see any console feature for showing the server content
In the browser developer tools there is a console section.  You can bring it up by pressing ctrl+shift+i

You should be able to see in the below image the response from the server to /echo/json/ as well as "success" printed in the console, which is at the bottom on the screen in that image.  You can see that I"m on the "Network" tab to show what information the browser is sending/receiving.  You'll also notice there's a "Console" tab that just shows the console.
Capture2.jpg
Julian HansenCommented:
Here is a demo I put together to show the various stages of the process.

Stage 1: Simulate the capture of the localStorage value (http://www.marcorpsa.com/ee/t3150.html)
Fill in your LS value and save it using the Save button.
Scroll down to see what is in your LS cache - look for the ls-demo value - make sure it is the one you typed in.
Decide whether you want a fail or success call to the server by clicking the checkbox
Click the Send to Server button.
If success - you get a message showing what was sent to the server and the url you are going to - afterwhich you are redirected
If fail you get a fail message
HTML
	<p>Save something to Local Storage</p>
	<textarea id="textinput" class="form-control" placeholder="Enter the data you want to save here"></textarea>
	<button class="btn btn-primary" id="savetols">Save to LS</button><br>
	<input type="checkbox" id="success" value="1"> Simulate success / fail (success checked / failed not checked)<br>
	<button class="btn btn-success" id="sendtoserver">Send LS to Server</button>

	<h2>What is in Local Storage</h2>
	<p>The above value will be stored in the key <p>'ls-demo'</b></p>
	<pre id="target"></pre>
	<button class="btn btn-warning" id="lsrefresh">Refresh</button>

Open in new window

jQuery
<script>
$(function() {
	$('#savetols').click(function(e) {
		e.preventDefault();
		localStorage.setItem('ls-demo', $('#textinput').val());
		refreshLS();
	});
	$('#lsrefresh').click(function(e) {
		e.preventDefault();
		refreshLS();
	});
	$('#sendtoserver').click(function(e) {
		e.preventDefault();
		var lsval = localStorage.getItem('ls-demo') || false;
		var status = $('#success:checked').length;
		$.ajax({
			url: 't3150.php',
			data: {lsval: lsval, status: status},
			type: 'POST',
			dataType: 'JSON'
		}).then(function(resp) {
			if (resp.status) {
				alert('Success: Received [' + resp.value + '], Redirecting you to: [' + resp.url + ']');
				window.location = resp.url;
			}
			else {
				alert('Oops, server did not like our data');
			}
		})
		.fail(function() {
			alert('failed to contact server');
		});
	});
	
	function refreshLS()
	{
		$('#target').text(JSON.stringify(localStorage, false, 2));
	}
});
</script>

Open in new window


Demo link repeated here
John WakefieldRetiredAuthor Commented:
Impressive demo, thanks. So when the data is sent to the URL is it useable in a PHP script?
Julian HansenCommented:
So when the data is sent to the URL is it useable in a PHP script?
Take a look at the PHP script (all source code is viewable in the tabs at the bottom of the demo)
You will see in that script that we are extracting the value $lsval from the POST as we would for a form.
From there you do what you need with it. In this case the script simply reflects it back to the calling script so you can see it in the Popup - this is to show
a) The value made it to the server
b) The server was able to extract and reflect the value

EDIT
Here is the PHP from the demo
<?php
// SAFELY EXTRACT THE POST DATA
// THE FIRST IS THE VALUE WE ARE INTERESTED IN - THIS IS THE LS VALUE
$lsval  = isset($_POST['lsval']) ? $_POST['lsval'] : false;

// THIS IS JUST FOR THE DEMO TO SIMULATE SUCCESS / FAILURE
$status = isset($_POST['status']) ? $_POST['status'] : false;

// CREATE A RESPONSE OBJECT AND DEFAULT IT TO FAILED STATE
$resp = new stdClass;
$resp->status = false;

// CHECK WE DID ACTUALLY GET A LS VALUE
if ($lsval) {
  // DO WE WANT TO SIMULATE SUCCESS OR FAILURE?
  if ($status > 0) {
    // SUCCESS - REFLECT VALUE BACK
    $resp->value = $lsval;

    // SET THE REDIRECT URL
    $resp->url = 't3150.resp.html';

    // SET RETURN STATUS TO SUCCESS
    $resp->status = true;
  }
}

// SEND THE DATA BACK AS JSON
die(json_encode($resp));

Open in new window

John WakefieldRetiredAuthor Commented:
Superb. That looks to be the answer. I will incorporate it into my script. Thanks a lot. I'm not able to do it right away, other demands on me, but I will respond later.
John
John WakefieldRetiredAuthor Commented:
I am sure it works as the demo is giving the right result, but when I change it to suit my script I am having trouble with the URL section where I get 'failed to contact server'. I have put my URL (called retieve.php) in this bit..

$.ajax({
          url: 'retrieve.php',

There must be something else that needs altering for it to work, I suppose.
RobOwner (Aidellio)Commented:
(no points for this)
Rule out the url by using the full path relative to the root of the domain or use the entire path including the domain (just make sure the webpage AND script are on exactly the same domain or it won't work
Julian HansenCommented:
failed to contact server is coming from line 31 of the jQuery script posted above i.e. in the .fail() call back.

This means there was a problem in the actual request.

Further to what Rob suggested - open your Console (F12) and run the page again. In the Network tab check the request that is made - most importantly check the URL that is being queried.

Right click the URL and copy it - then paste it into a new tab and request it. If that does not work (which it shouldn't) then as Rob has pointed out your path is wrong. Get the request working in the new tab - modify the path until your script runs then copy the relative section of the path back into your script.
John WakefieldRetiredAuthor Commented:
I'm baffled. I will include the script that I adapted from your demo, and screen shots of the console information. The URL where I am testing this is http://www.jhw1.com/storage.php and the target page is http://www.jhw1.com/retrieve.php. When that is run without being directed from storage page there is a message {"status":false}. storage.phpretrieve.phpConsole storageNetworkRequest
Julian HansenCommented:
Can you add this to your retrieve.php
 header("Access-Control-Allow-Origin: *");

Open in new window

Put this at the top of your code.

Post back here when done

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
John WakefieldRetiredAuthor Commented:
Yes, that's it! I get the data back in useable form (as far as PHP is concerned). Brilliant!!!

You fellows are terrific.

The friend I am doing this for will be over the moon too.

Thanks for all the trouble you have taken
John
John WakefieldRetiredAuthor Commented:
Converting a javascript to useable PHP is clearly very complicated for someone like me who has no knowledge of it. When I discovered the possibilty of storing data to a browser without an internet connection, I assumed that getting it back again to use in a PHP program would be straightforward. Well it is, now that your experts have spent a great deal of time working on the problem and answering, what must appear to them, my stupid questions.
Full marks to all concerned and I hope that the final resultant scripts can be used to help many more people.
Julian HansenCommented:
You are welcome.
John WakefieldRetiredAuthor Commented:
I will keep your copyright on the script. I can also put a link in the finished pages.
RobOwner (Aidellio)Commented:
Glad we could help 👍
John WakefieldRetiredAuthor Commented:
Sorry to come back again. As I said before, the script works well on my test page. The only problem is that I have now transferred it to an https page and it just hangs. It won't save to local storage nor can I get the console to operate. Maybe it's something simple that needs to be changed? Of course, the URLs have been changed to suit.
Julian HansenCommented:
nor can I get the console to operate.
You press F12 and what happens?

If the console is not working then you have a bigger problem than your site not working.

Things to check are
- that you are using the same protocol (https) as the host page. Suggestion instead of http:// just do // for your scripts so it adopts the protocol of the master
- that the report.php script responds when you browse to it

Primary goal: get the console working.

Have you tried FF + Chrome?
John WakefieldRetiredAuthor Commented:
I found the fault. It was the http bit in the jQuery. I replaced the script with this..

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope that helps others who get the same problem.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Storage

From novice to tech pro — start learning today.