提交后如何在另一页显示结果？

Question

提交后如何将数据显示到另一个html中？我试图将值存储在本地存储中，但没有成功。如何在其他页面显示结果？在下面的代码片段中，我介绍了如何使用show和hide方法显示数据。但我希望在新的HTML页面中显示数据。

  
      var data = [
            {
                "username": "MADHU BABU POOJALA",
                "skills": "BD",
                "location": "Hyderabad",
                "email": "rgw@yahoo.in",
                "bscore": 856,
                "ranking": 14652,
                
            },
             {
                "username": "Mj",
                "skills": ".net",
                "location": "Hyderabad",
                "email": "csaca@yahoo.in",
                "bscore": 8540,
                "ranking": 1452,
                
            }
        ];
      
  var result = [];

        function Sort(val) {
            result.sort(function (a, b) {
                if (a[val] < b[val]) return -1;
                if (a[val] > b[val]) return 1;
                return 0;
            });

            searchResult(result);
        }

        function search(str) {
            var str = str.trim().toUpperCase();
            if (str !== '') {
                var rslt = [];
                for (var j = 0; j < result.length; j++) {
                    if (result[j].skills.toUpperCase().match(str)) {
                        rslt.push(result[j]);
                    }
                }
                searchResult(rslt);
            } else {
                searchResult(result);
            }
        }

        function getResult() {
            /* Read value from input fields */
            var skills = $("#skills").val() || '',
                email = $("#email").val() || '',
                username = $("#username").val() || '',
                location = $("#location").val() || '',
                i;
            result = []
            for (i = 0; i < data.length; i++) {
                if ((skills !== '' && data[i]["skills"].toUpperCase().indexOf(skills.toUpperCase()) !== -1) || (data[i]
                        ["email"].toUpperCase() === email.toUpperCase()) || (data[i]["location"].toUpperCase() ===
                        location.toUpperCase()) || (
                        data[i]["username"].toUpperCase() === username.toUpperCase())) {
                    result.push(data[i]);
                }
            }
            return result;
        };
        $('#submit').click(function onClick() {
            $(".ip").hide();
            $(".tb").show();
            var output = getResult();
            searchResult(output);
        });
        $("#back").click(function () {
            $('input[type="text"]').val('').removeAttr('checked').removeAttr('selected');
            $('input[type="email"]').val('').removeAttr('checked').removeAttr('selected');
            $(".tb").hide();
            $(".ip").show();
        });
        function searchResult(output) {
            var html = '';
            $.each(output, function (key, value) {
                html += '<div style="border:1px solid #000;padding:10px;margin:10px;">';
                html += '<span style="font-weight:bold;">' + value.username + '</span>' +
                    '<br/>';
                html += '<span>' + 'Email :' + '</span>' + '<span>' + value.email + '</span>' +
                    '<br/>';
                html += '<span>' + 'Skills :' + '</span>' + '<span>' + value.skills + '</span>' +
                    '<br/>';
                html += '<span>' + 'Location :' + '</span>' + '<span>' + value.location + '</span>' +
                    '<br/>';
                html += '<span>' + 'B-score :' + '</span>' + '<span>' + value.bscore + '</span>' +
                    '<br/>';
                html += '<span>' + 'Ranking :' + '</span>' + '<span>' + value.ranking + '</span>' +
                    '<br/>';
               
                html += '</div>';
            });
            $('#table').html(html);
        }
   
        $(document).ready(function () {
            $('#submit').attr('disabled', 'disabled');
            $('input[type="text"]').keyup(function () {
                if ($(this).val() != '') {
                    $('input[type="submit"]').removeAttr('disabled');
                }
            });
        });
    

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <style>
        .results tr[visible='false'],
        .no-result {
            display: none;
        }

        .results tr[visible='true'] {
            display: table-row;
        }

        .form-group {
            position: fixed;
            top: 30%;
            left: 50%;
            width: 1200px;
            height: 200px;
            background: #fff;
            transform: translate(-15%, -50%);
        }
    </style>
</head>

<body>
    <div class="ip">
        <div class="form-group ">
            <div class="col-4">
                <label for="skills">Skills</label>
                <input class="form-control" id="skills" type="text" placeholder="skills">
            </div>
            <div class="col-4">
                <label for="email">Email</label>
                <input class="form-control" id="email" type="text" placeholder="mail id">
            </div>
            <div class="col-4">
                <label for="username">Username</label>
                <input class="form-control" id="username" type="text" placeholder="username">
            </div>
            <div class="col-4">
                <label for="location">location</label>
                <input class="form-control" id="location" type="text" placeholder="location">
            </div>
            <br>
            <div class="col-4">
                <input id="submit" class="btn" type="submit" value="submit" disabled='disabled'>
            </div>
        </div>
    </div>
    <br>
    <div style="display: none" class="tb">
        <button class="btn" id="back">back to search</button>
        <br>
        <br>
        <br>
        <div class="container-fluid">
            <div class="row">
                <div class="left">
                    <label style="font-size: 20px;color: black;margin:0px">
                        Core Skills :
                    </label>
                    <input type="text" onkeyup="search(this.value)">
                </div>
                <div class="right">
                    <form>
                        <label style="font-size: 20px;color: black;margin:0px">
                            Sort By :
                        </label>
                        <select onchange="Sort(this.value)">
                            <option>-- select --</option>
                            <option value="username">A to Z</option>
                            <option value="bscore">B-score</option>
                            <option value="ranking">Ranking</option>
                        </select>
                    </form>
                </div>
            </div>
        </div>
       
      
        <div id="table">
        </div>
    </div>
    
   

</body>

</html>