4 Replies - 2302 Views - Last Post: 14 May 2014 - 06:15 AM

#1 mutago234  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 155
  • Joined: 08-September 13

html5 web storage during session login

Posted 11 May 2014 - 02:03 PM

i want to create a web storage session login and print a successful page (welcome.html) with the
loggin session username and password.

Login form works but those not display the welcome user on the successful page. any help

below is the code
$(document).ready(function(){
 $("#rolling").slideDown('slow');
});
$(document).ready(function()
 {
$("#submit").click(function()
{
if($("#uname").val()=="" || $("#pass").val()=="")
{
$("p").fadeTo('slow','0.99');
$("msg").hide();
$("p").fadeIn('slow',function(){$("p").html("<span id='error'>Please enter username and password</span>");});
return false;
}
else
{



$("p").html('<span class="normal"><img src="loading.gif"></span>');
var uname = $("#uname").val();
var pass = $("#pass").val();
$.getJSON("server.php",{username:uname,password:pass},function(json)
{
// Parse JSON data if json.response.error = 1 then login successfull
if(json.response.error == "1")
{


                      //store session
                window.localStorage["uname"] = uname;
                window.localStorage["pass"] = pass;             
              $.mobile.changePage("welcome.html");

}
// Login failed
else
{

data = "<span id='error'>Invalid account?</span>";
}




welcome.html
<!DOCTYPE HTML>
<html>
<head>
</head>

<body>

data = "<span id='msg'>Welcome "+uname+"</span>";

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: html5 web storage during session login

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: html5 web storage during session login

Posted 11 May 2014 - 04:49 PM

That welcome page doesn't make any sense. Why is there a single line of Javascript code, setting a data variable, in the HTML markup? It's not inside <script> tags, nor do I see the data variable been used anywhere. What's supposed to be happening there?


Also, it is absolutely crucial - especially when using languages like Javascript, that tend to encourage nested, inline callback functions, and other such coding styles - that you format your code properly. Your first snippet is absolutely unreadable. You wouldn't get away with that in any half-decent professional environment; no decent developer team would tolerate it.
Was This Post Helpful? 0
  • +
  • -

#3 mutago234  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 155
  • Joined: 08-September 13

Re: html5 web storage during session login

Posted 13 May 2014 - 01:23 PM

Below is what am trying achieve, when a user login, on the successful page, it alerts eg welcome user, how will i print the welcome user on the body of the html as opposed to alerting it on the head

<!DOCTYPE HTML>
<html>
<head>

<script>
//sessionStorage.setItem('uname');               // defining the localStorage variable
alert("welcome: " + localStorage.getItem('uname'));  // accessing it
confirm("welcome " + localStorage.uname);                     // another way of accessing the variable


</script>


</head>

<body>


welcome: " + localStorage.getItem('uname'); 

</body>

any help
</html>




Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: html5 web storage during session login

Posted 13 May 2014 - 04:22 PM

What you are doing on line 19 there is complete nonsense. You can't just past Javascript lines into the HTML like that. They are two entirely separate things.

If you want to manipulate the contents of the page, you basically have two options. The first is the old document.write way, where you put Javascript into the page where you want the output to appear and have it execute as the page is being rendered. This is very outdated and discouraged though, so I wouldn't recommend it. The second method - the one you should use! - is the DOM. The DOM lets you update the page after it is rendered, using various functions that find and manipulate the elements in it.

I suggest you read up on the DOM, and use Google to find some good tutorials and articles on the subject. It's essential knowledge for any web-developer these days. A good start would be the DOM page on MDN.
Was This Post Helpful? 0
  • +
  • -

#5 mutago234  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 155
  • Joined: 08-September 13

Re: html5 web storage during session login

Posted 14 May 2014 - 06:15 AM

Thank You ATLi. Its resolved.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1