将 javascript 对象变量从一个 HTML 页面传递到另一个 HTML 页面

Question

在 HTML 中，我尝试将 javascript 对象变量从一个页面传递到另一个页面，我尝试了一些方法，例如内部存储和使用页面处理程序设置值，但它们都不起作用。我的代码如下： 第 1 页：

<!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>

第2页：

<!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>

我也试过here提到的，但我总是得到错误

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

即使我没有使用任何框架。

Answer 1

启动带有--allow-file-access-from-files 标志的chrome 或chromium，以便能够通过file: 协议从本地文件系统访问文件。见Read local XML with JS。