It's my html body code.

    <body>
    
    <input id="search" name="search" type="text" oninput="change()">
    <input type="text" id="test" style="display: none;">
    <input type="button" onclick="print()" value="submit">
    <a href="http://naver.com">naver</a>

    <script>
        $(document).ready(function(){
            console.log('ready finished');
        });

        window.onload = function() {
            console.log('load finsihed');
            console.log('#search:::', document.getElementById("search").value);
            print();
        };
        function change() {
            $("#test").val($('#search').val())
            console.log('change:::::::::', $('#search').val())
        }

        function print() {
            console.log('test::::', $('#search').val());
        }
    </script>
    </body>

When I go back from naver link page to my html page, the #search input tag's value is kept. But console.log says that is empty. So I try to debug, and it's empty while window.onload event proceed I want to get my #search input value when users go back.

my console

Solution

I found the solution thanks to comment of lastr2d2! Use setTimeout in onload function as follows.

window.onload = function() {
  console.log('load finsihed');
  console.log('#search:::', document.getElementById("search").value);
  // print();
  setTimeout(print, 0);
};

It works very well. I think the operation of changing the input or select tag's value is in the rendering queue, and the operation of the onload function seems to be executed first because it is in the stack without setTimeout function. But, when using setTimeout function for the print function in onload function, then it goes to the callback queue, and because the rendering queue is prior to callback queue, input value seems to be printed very well.