How do I redirect to an HTML page and bring in attached data?

Question

So I'm trying to redirect from my login page to the dashboard, I need to bring in some variables when I redirect, such as ID's, etc. I can't use MVC or .Net structure so I have no idea how the heck I'm gonna bring in data when I redirect so it's there in order to use on other API calls throughout my mobile app. Anybody, please??

      self.LoadCustomer = function (data)
        Bring 'data' in the redirect....
        window.location = "Layout.html";
    }

You NEVER "bring" passwords around, especially in plain text! Only compare the hashed and salted password against its counterpart in your database. Otherwise the rest of the information can be passed as part of the URL query parameter. — Terry, Feb 16 '16 at 22:13
Yep, this is a gaping security flaw. you need a solid backend tech like .net or php or the like to do what you are trying to do. — Bosworth99, Feb 16 '16 at 22:15
Agreeing with Terry. Instead of hauling passwords around, you should validate against a user and carry around a session that can expire and will be removed on logging out. — Joseph Marikle, Feb 16 '16 at 22:16
haha, okay okay folks calm your horses.. 1. We usually use sessions but we can't with this new application. 2. All our information is heavily encrypted, really what i'm wanting is ID's we use. 3. I'm using API to login them in from our other ASP.NET MVC4 application.. but I can't setup this application like the other ones and use MVC, so I need to find another way. ;) — IAMABANANA, Feb 16 '16 at 22:34

Vinny M · Answer 1 · 2016-02-16T22:17:45.157

NEVER STORE PASSWORDS!!! There is no need, they should always be checked, instead store some type of expiring information.

I like using this library: JS-Cookie

It allows you to store and retrieve local data:

Set the cookie on the first page:

self.LoadCustomer = function (data) {
   Cookies.set('data', data)
}

Read it on the next:

Cookies.get('data'); //String of data
Cookies.getJSON('data'); //Object literal of data

score 0 · Answer 2 · answered Feb 16 '16 at 22:17

You can use sessionStorage to achieve the desired effect. I am assuming that data is a JSON object.

self.LoadCustomer = function (data) {
    //store the data in sessionStorage
    sessionStorage.setItem("data", JSON.stringify(data) );
    window.location = "Layout.html";
}

And then inside the Layout.html you can use the sessioStorage to read the value back.

//read the data
var data = JSON.parse( sessionStorage.getItem("data") );

As others have commented just be aware of security implications of storing passwords. Use a session key if possible.

score 0 · Answer 3 · answered Feb 16 '16 at 22:45

Here is a really simple, and really dopey way of passing values along on the window.location, somewhat like GET params :

index.html

<body>
    <script type="text/javascript" charset="utf-8">

    window.setTimeout(function(){
        var obj = {
            param1:"value",
            param2:"value"
        };
        window.location="layout.html#" + JSON.stringify(obj);
    },3000);

    </script>
</body>

layout.html

<body onload="read()">
    <script type="text/javascript" charset="utf-8">
        function read(){
            console.log(JSON.parse(window.location.hash.replace('#','')));
        }
    </script>
</body>

This would be quite ill-advised, considering the better alternatives (local storage, cookies, SPA frameworks, or server tech), but would work. (Which isn't really saying much, because you can do a lot of terrible crap with JS). Consider it a novelty.

If you actually need to manage security, you need to implement some type of server-side session logic, or your pants are all of the way down.

terrymorse · Answer 4 · 2016-02-17T17:08:59.163

-1

When I need to pass along data to another page, I use some JavaScript to:

create a form element,
add a named input element to the form,
convert data to JSON and store in the input,
submit the form via post to the new page.

Here's my helper function:

function submitJSON( path, data, postName ) {
    // convert data to JSON
    var dataJSON = JSON.stringify(data);

    // create the form
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', path);

    // create hidden input containing JSON and add to form
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", postName);
    hiddenField.setAttribute("value", dataJSON);
    form.appendChild(hiddenField);

    // add form to body and submit
    document.body.appendChild(form);
    form.submit();
}

Use it like this:

var myData = {param1: 1, param2: 2);
var myPath = "path_to_next_page.html";
submitJSON( myPath, myData, 'myPostName' );

Retrieve the data on the next page like this:

<?php
    $postVarsJSON = $_POST['myPostName'];
    $myData = json_decode( $postVarsJSON );
?>

Or in JavaScript:

var myData = JSON.parse( <?php $_POST['myPostName']; ?>);

edited Feb 17 '16 at 17:08

answered Feb 16 '16 at 22:40

terrymorse

5,564
1
14
19

I think the idea is the OP wanted to do this without server side logic. – Bosworth99 Feb 16 '16 at 23:01
1

@Bosworth99 Guess I missed the OP's implied "no server side logic" restriction. Given that restriction, I'd recommend `localStorage` or `sessionStorage` (but not cookies--too much of a performance hit). – terrymorse Feb 17 '16 at 17:26
@terrymorse do you have any links to back up your "not cookies" claim? Interested in seeing the performance hit you talk about. Also, cookies add the leverage of being modified by both client and server. – Vinny M Feb 17 '16 at 19:36
Cookies are always sent in the HTTP header of a page, back and forth between client and server. If you are only using the data locally, there's no reason to use cookies. They will waste bandwidth and slow page load times. More details here: . – terrymorse Feb 17 '16 at 23:15
@VinnyMannello Here's a better review of the issues when choosing between [cookies, localStorage, and sessionStorage](http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies) – terrymorse Feb 18 '16 at 00:34

How do I redirect to an HTML page and bring in attached data?

4 Answers4