How to pass LocalStorage data to PHP using Ajax jQuery

Here is a scenario : “A shopping website will have the cart. User goes on adding items to his cart. Finally when shopping completed, the list of all the items added to the cart should be shown”.

Solution : Use LocalStorage for storing the product ID’s and then use AJAX to retrieve the products from the server. To retrieve the product details, you need to pass the items product ID’s from the LocalStorage to server-side PHP. LocalStorage is on client-side and you cannot pass client data to server using PHP. In this guide i will be showing you how to store the data into LocalStorage, Retrieve and pass it to the server side PHP scripting.



HTML to get input from the user and output the data retrieved from the server :

<input autofocus="autofocus" placeholder="Add Name for Storing" id="name"><input id="submit" type="submit" value="submit">
<div id="output"></div>

Read More: Ajax based add and delete items for storing user settings in LocalStorage using jQuery

Javascript code to Store input data in browser LocalStorage and pass it to the server-side PHP file. Input data is being stored as JSON Object and object itself is sent to server-side PHP using $_POST request as it is secure and faster.

// Function to generate random str as key for the localStorage
function randomStr(m) {
        var m = m || 9; s = '', r = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for (var i=0; i < m; i++) { s += r.charAt(Math.floor(Math.random()*r.length)); }
        return s;

var hasStorage = true;
if(!localStorage.getItem(“names”)) {
var hasStorage = (function() {
try {
var myRSSObject = new Object();
localStorage.setItem(“names”, JSON.stringify(myRSSObject));
return true;
} catch(e) {
return false;
$(“#submit”).click(function() {
if(hasStorage) {
var names = JSON.parse(localStorage.getItem(“names”));
names[randomStr(7)] = document.getElementById(“name”).value;
localStorage.setItem(“names”, JSON.stringify( names ));
alert(“Stored Succesfully”);
document.getElementById(“name”).value = “”;
alert(“Now Passing stored data to Server through AJAX jQuery”);
type: “POST”,
url: “backend.php”,
data: {data: localStorage.getItem(“names”)},
success: function(data) {
} else {
alert(“Storage Failed. Try refreshing”);

Server-Side PHP code : backend.php

<h1>Below is the data retrieved from SERVER</h1>
        date_default_timezone_set('America/Chicago'); // CDT
        echo '<h2>Server Timezone : ' . date_default_timezone_get() . '</h2>';
        $current_date = date('d/m/Y == H:i:s ');
        print "<h2>Server Time : " . $current_date . "</h2>";
        $dataObject = $_POST['data'];
        $json = json_decode($dataObject,true);
        $i = 1;
        foreach($json as $key => $value) {
              print "<h3>Name".$i." : " . $value . "</h3>";

More on HTML5 LocalStorage:

How to store data in Browser’s HTML5 LocalStorage using Javascript

How to dynamically load contents on previous and next navigation buttons click using Ajax

How to parse XML using jQuery, store in HTML5 LocalStorage and read from LocalStorage

Related Content
vps germany
Disclaimer: The content published in this article is the views of the author only. Techglimpse does not gurantee accuracy, completness or validity. If you believe the content on this post violates your copyright, please send us a mail for removal. Read more.