phonegap: store database value in local storage

Question

This is first time i am using phonegap and local storage. So, if i asked something silly then i apologise.

I am trying to create a login/signup page for mobile app. I have created a front end page in html/js/jquery and backend is in php.

In php we use session to store some data but in html there is no session. However i got to know that we can use local storage to store these values. Here is my php code which is used for authentication.

<?php
session_start();
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
require_once('include/db.php');
require_once('functions.php');
$res=array();
$res['errors']=array();
if(isset($_POST)) {
    if(empty($_POST['email'])) {
        array_push($res['errors'], "Email could not be empty");
    }
    if(empty($_POST['password'])) {
        array_push($res['errors'], "Password could not be empty");
    }
    if(!empty($_POST['email']) && !isValidEmail($_POST['email'])) {
        array_push($res['errors'], "Invalid Email Format");
    }

        $email = $_POST['email'];
        $password = $_POST['password'];
        $now = date('Y-m-d H:i:s'); 

    if(empty($res['errors'])) { 
        $result = $mysqli->prepare("SELECT uid,pic,fname,last_seen FROM users where email= ? and password = ? and status = '1'");
        $result ->bind_param("ss", $email, $password);
        $result->execute();
        $result->store_result();

        $result->bind_result($uid, $pic, $fname, $last_seen);
        if($result->num_rows == 1){

             while ($result->fetch()) {
                        $_SESSION['uid'] = $uid;
                        $_SESSION['pic'] = $pic;
                        $_SESSION['name'] = $fname;
                        $_SESSION['last_login'] = $last_seen;
            }

            $res['success'] = true;
        }
        else{
            array_push($res['errors'], 'Invalid login details');
            $res['success'] = false;

        }
    }else{
        $res['success'] = false;        
    }
    session_write_close();
     echo json_encode($res);
}
?>

here is the ajax code.

<script type="text/javascript">
$('document').ready(function()
{
            $("#login").on("submit", function(e) {              
                e.preventDefault;
                var btn = $('#btn-login');
                btn.button('loading');
                $.ajax({
                    type: 'post',
                    url: 'loginexec.php',
                    cache: false,
                    dataType: 'json',
                    data: $('form#login').serialize(),
                    beforeSend: function() { 
                        $("#validation-errors").hide().empty(); 
                    },
                    success: function(data) {
                        if(data.success == false)
                            {
                                var arr = data.errors;
                                $.each(arr, function(index, value)
                                {
                                    if (value.length != 0)
                                    {
                                        $("#validation-errors").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                                    }
                                });
                                $("#validation-errors").show(); 
                                btn.button('reset');                            
                            } else {
                                localStorage.login="true";
                                localStorage.email=email;
                                localStorage.id=id;

                                 window.location.href = 'user_profile.php';
                            }
                    },
                    error: function(xhr, textStatus, thrownError) {
                        alert('Something went to wrong.Please Try again later...');
                        btn.button('reset');
                    }
                });             
                return false;
            });
        });

    </script>

I want to store these values in local storage but not sure how to do that.

$uid;
$pic;
$fname;
$last_seen;

Please advise.

Answer 1

First mistake here I see is usage of localStorage is wrong:

use window.localStorage.setItem("login",1); rather than localStorage.login ="true";

then to access it use window.localStorage.getItem("login");

However, in my opinion it is also not a good idea too store something like sessions, (and even also not email addresses) in localStorage as any other malicious app can access all localStorage values,- why not rather do a single ajax request on each page first to check if valid session is establisshed and if not redirect to login. In this case there would also be no need to store last_seen time as well, sessions and good authentification should always be done server side.