使用PHP将本地存储数据保存到服务器

Question

I'm trying to implement a "save later" functionality in jquery using localstorage. the idea is saving every form event in localstorage and using a button to sync them and save to the server.

I manage to save form data to localstorage and retrieve all the localstorage saved. Currently i'm struggling on how i can be able to submit specific values only to the server using PHP

Here's my code for saving form data to localstorage

$('#systemInventory').on("submit", function(e) {
        e.preventDefault(); // prevent the form from attempting to send to the web server
        let $inputs = $('#systemInventory :input');

        let values = {};
        $inputs.each(function() {
            values[$(this).attr("name")] = $(this).val();
        });

        let title = 'systemInventory' + $.now();
        localStorage.setItem(title, JSON.stringify(values));
        $('#systemInventory')[0].reset();
        mdtoast('Successfully Saved',
            { type: mdtoast.INFO });
    });

and here's the one i used for retrieving data from the localstorage

function allStorage() {

    let values = [],
        keys = Object.keys(localStorage),
        i = keys.length;

    while ( i-- ) {
        values.push( localStorage.getItem(keys[i]) );
    }

    return values;
}

Here's the one i'm trying to do to save specific data in the PHP storage

$.each(allStorage(), function (key, value) {
        let data = JSON.parse(value);
        console.log(data);
        $.ajax({
            url: "sync.php",
            method: 'POST',
            data: {data: data},
            success: function (response) {
                console.log(response);
            },
            error: function (response) {
                console.log(response);
            }
        });
    });

and my php code is

if (isset($_POST['data'])){

    foreach ($_POST['data'] as $key => $value){

        $data[] = array(
            $key => $value
        );

    }

    $dataForm = call_user_func_array('array_merge', $data);

    print_r($dataForm);


//    print_r($data);

}

When console logging all the localstorage saved i have this result

and when clicking the sync, the one that is sending on the server i'm having this issue

what i really want to happen is when i submit the localstorage data to php it will automatically form specific array for example

$data = array(
'type'=>'product',
'beginning'=>1,
'delivery'=>1

);

Answer 1

The problem is your allStorage() function is returning an indexed array, not an object, so you're getting only the values from local storage, not the keys too.

This means when you come to pass the data to PHP, it's ending up as an indexed, not associative, array, ie without keys. This would be apparent if you ran print_r() on the received data, for example.

allStorage() can be fixed (and simplified) as:

function allStorage() {
    let data = {}; //<-- note object, not array
    for (var key in localStorage) data[key] = localStrage[key];
    return data;
}