PHP and Javascript JSON.stringify in localstorage and convert it into JS object?

Lets say I have a simple PHP that echo's/prints this:

[['Staff', 'somewhere', 'map-marker-icon.png'], ['chinese', 'London', 'map-marker-icon.png'], ['Trade', 'essex', 'map-marker-icon.png'], ['Fare', 'london', 'map-marker-icon.png'], ]

I get whatever this PHP echo's on my html page using AJAX and stores them in localstorage using stringify.JSON like so:

$.ajax({
type: "POST",
url: "my-php-page.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){},
success: function(data){

localStorage.setItem('mapMarkers', JSON.stringify(data));
}
});

I get the AJAX response (data) stored in localstorage and I can see it there being stored.

Now, the next step that I'm trying to do is to get the same localstorage value and use it as a javascript object.

So i went ahead and did it like this in my html page after the localstorage is set like above:

var locations = JSON.parse(localStorage.getItem('mapMarkers'));
alert(locations);

The issue that I'm having is that when I alert(locations); I get null in the alert box!

But I can see the localstorage being stored in my browser!

this is what I see in localstorage:

Value:

"rn[['Staff', 'somewhere', 'map-marker-icon.png'], ['chinese', 'London', 'map-marker-icon.png'], ['Trade', 'essex', 'map-marker-icon.png'], ['Fare', 'london', 'map-marker-icon.png'], ]

JSON

    0
        "
    "

    1
        "n"

    2
        "["

    3
        "["

    4
        "'"

    5
        "S"

    6
        "t"

    7
        "a"

etc etc......

        "]"

Could someone please advise on this issue as I have been spending over 2 days trying to figure this out with no luck at all.

Any help would be appreciated.

EDIT

Okay, it seems like back to drawing board but i keep updating this question to make it a nice tutorial like for others too:

Okay, so I tried to change my PHP like this:

$return_arr = array();
$sql = "SELECT * FROM restaurants";
if ($result = mysqli_query($db, $sql )){
    while ($row = mysqli_fetch_assoc($result)) {
    $row_array['id'] = $row['id'];
    $row_array['location'] = $row['location'];
    $row_array['name'] = $row['name'];
    $row_array['type'] = $row['type'];

    array_push($return_arr,$row_array);
   }
 }

mysqli_close($db);

echo json_encode($return_arr);

This prints something like this:

[{"id":"1","location":"Fitzrovia","name":"Staff Welfare","type":"indian"},{"id":"2","location":"Soho, London","name":"perfect chinese","type":"chinese"},{"id":"3","location":"Southend-on-sea, essex","name":"Fare Trade","type":"kebab"},{"id":"5","location":"Soho, london","name":"Fare Trade","type":"kebab"}]

The first thing I noticed is that I get {} instead of []....

Mainly because I need my Javascript object to look like this:

   [['Staff', 'somewhere', 'map-marker-icon.png'], ['chinese', 'London', 'map-marker-icon.png'], ['Trade', 'essex', 'map-marker-icon.png'], ['Fare', 'london', 'map-marker-icon.png'], ]

Withdout all the "id":...,"location":.. etc etc.....

I don't know if I could even use that with {} in my Javascript! So, any advise on that would be grand.

The second thing I did was I changed the AJAX code in my html like this:

    $.ajax({
    type: "POST",
    url: "my-php-page.php",
    data: dataString,
    crossDomain: true,
    cache: false,
    beforeSend: function(){},
    success: function(data){

    localStorage.setItem('mapMarkers', JSON.stringify(data));
var locations = JSON.parse(localStorage.getItem('mapMarkers'));

alert(locations);

    }
    });

This is what I get in the alert box inside the ajax success:

[{"id":"1","location":"Fitzrovia","name":"Staff Welfare","type":"indian"},{"id":"2","location":"Soho, London","name":"perfect chinese","type":"chinese"},{"id":"3","location":"Southend-on-sea, essex","name":"Fare Trade","type":"kebab"},{"id":"5","location":"Soho, london","name":"Fare Trade","type":"kebab"}]

I don't think that's even correct since its not a JSON.parse(...); string!

Any advise on how to proceed from here would be appreciated.