Passing javascript object variable from one HTML page to another

Question

In HTML I'm trying to pass javascript object variable from one page to another, I have tried a few methods, such as internal storage and setting value using page handlers, but none of them worked. My code is as follows: Page1:

<!doctype html>

<html>
    <head>
        <script>
            function putRangeValue() {
                pain_value.value = pain_range.value;
            }
            
            var empData;
            function saveData() {
                empData = new Object();

                empData.name = emp_name.value;
                empData.contact = emp_telephone.value;
                empData.address = emp_address.value;
                empData.dob = emp_dob.value;
                empData.reason_visit = visit_reason.value;
                empData.pain_range = pain_range.value;
                empData.preferred_time = preferred_time.value;
                empData.preferred_date = preferred_date.value;

                
                document.write(empData.name+" "+empData.contact+" ");
                document.write(empData.address+" "+empData.dob+" ");
                document.write(empData.reason_visit+" "+empData.pain_range+" ");
                document.write(empData.preferred_time+" "+empData.preferred_date);
                
                
                var new_window = window.open("page2.html");
                
                /*var new_window = window.open("page2.html");
                new_window.emp=empData.value;*/
                
            }
        </script>
    </head>
    <body>
        <fieldset>
            <legend>
                Personal Details:
            </legend>
            Name:<br>
            <input type="text" id="emp_name" value="john"><br>
            Telephone number:<br>
            <input type="tel" id="emp_telephone" value="87473257"><br>
            E-mail address:<br>
            <input type="text" id="emp_address" value="john@someid.com"><br>
            Date of birth:<br>
            <input type="date" id="emp_dob"  value="24-04-2017"><br>
        </fieldset>
        <fieldset>
            <legend>
                Appointment Request:
            </legend>
            What is the reason for your visit?<br>
            <input type="text" id="visit_reason"  value="sick"><br>
            Current pain level<br>
            <input type="range" min="0" max="10" id="pain_range" value="0" onchange="putRangeValue()">
            &nbsp;
            <input type="text" size="1" id="pain_value" value="0"><br>
            Preferred date:<br>
            <input type="date" id="preferred_date" value="25-04-2017"><br>
            Preferred time:<br>
            <input type="time" id="preferred_time" value="23:03"><br>
        </fieldset>
        <br>
        <button onclick="saveData()">Submit</button>
    </body>
</html>

Page2:

<!doctype html>

<html>
    <head>
        <title>

        </title>
        <script>
            function displayData() {
                var emp = window.opener.empData;
                
                document.write(emp.name+" "+emp.contact+" ");
                document.write(emp.address+" "+emp.dob+" ");
                document.write(emp.reason_visit+" "+emp.pain_range+" ");
                document.write(emp.preferred_time+" "+emp.preferred_date);
            }
        </script>
    </head>
    <body>
                    
        <script>
            displayData();
        </script>
    </body>
</html>

I have also tried what has been mentioned here, but I always get the error

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at displayData (file:///E:/page2.html:13:28)
    at file:///E:/file:///E:/page2.html:25:4

even though I'm not using any frame.

`file://` urls are always CORS blocked; test from localhost instead. — Daniel Beck, Apr 22 '17 at 15:55
So this code is correct but the pages would need to be run on localhost for the object to be accessible? And is there anyway to modify the CORS configuration for local files? — Mirhawk, Apr 22 '17 at 15:58
Try launching chrome with `--allow-file-access-from-file` flag, see http://stackoverflow.com/questions/41279589/read-local-xml-with-js/41401418#41401418 — guest271314, Apr 22 '17 at 16:03
Thanks, it worked! Could either of You post an answer so that I can mark question as solved? — Mirhawk, Apr 22 '17 at 16:09

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Launch chrome or chromium with --allow-file-access-from-files flag set for ability to access files from local fielsystem from file: protocol. See Read local XML with JS.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 22 '17 at 16:16

guest271314

1
15
104
177

Passing javascript object variable from one HTML page to another

1 Answers1