I am saving form data to localStorage in a browser. I have a problem with retrieval, converting it to php.
The sample code fails to do the conversion. This is not a duplicate entry asking about the differences between server side and client side, although that is clearly the cause of the problem I have. What I need is for advice on how to overcome the problem, with some sample script that shows me how to get the desired result. My knowledge of ajax is non-existent, and having looked at various tutorials I cannot see how it would fit into the script in place of the last php lines (which are obviously wrong). I use php extensively and rarely have any use for javascript, except on this occasion.
<?php
$cust_no=$_POST['cust_no'];
$cust_id=$_POST['cust_id'];
$cust_name=$_POST['cust_name'];
$cust_addr=$_POST['cust_addr'];
$cust_all=$cust_no."|".$cust_id."|".$cust_name."|".$cust_addr;
?>
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<form method = "POST" action = "" name="maint_form">
<input type="text" name="cust_no" size="10" value="<?php print $cust_no;?>">
<input type="text" name="cust_id" size="10" value="<?php print $cust_id;?>">
<input type="text" name="cust_name" size="10" value="<?php echo $cust_name;?>">
<input type="text" name="cust_addr" size="10" value="<?php print $cust_addr;?>">
<p><input type="submit" value="Continue"></p>
</form>
<script>
var customer = <?php echo json_encode($cust_all); ?>;
if (typeof(Storage) !== "undefined") {
localStorage.setItem("custall", customer);
document.getElementById("result").innerHTML = localStorage.getItem("custall");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
<?php
$all_delim = '<script>document.getElementById("result").innerHTML = localStorage.getItem("custall");</script>';
echo "all_delim=".$all_delim;
?>
</body>
</html>