お世話になっております。

● キーワードを１ページ目で入力し、２ページ目に表示する方法
が知りたいです。

<script>
  function mHozon() {
  key = $("#key").val();
  document.getElementById("keyword").innerText = key;
</script>

スクリプトの部分でキーワードを取得し、書き換えたいです。

<body>
  <!-- Top Page -->
  <div data-role="page" id="TopPage">
  <header data-role="header" data-position="fixed" data-theme="c">
  <h1>Hozon Page1</h1>
  </header>
  <section data-role="content">
  <h1>キーワード</h1>
    <input type="text" id="key">
    <br>
    <a href="#MainPage" id="button" onclick="mHozon" data-role="button" data-inline="false" data-theme="b">O.K.</a>
  </section>
  </div>

  <!-- Main Page -->
  <div data-role="page" id="MainPage">
  <header data-role="header" data-position="fixed" data-theme="c">
  <h1>Hozon Page2</h1>
  </header>
  <section data-role="content">
  <h1>キーワード</h1>
  <p id="keyword" >ここに表示</p>
  </section>
  </div>
</body>

ご指摘 よろしくお願いします。

【補足】
上記の方法にこだわりません。
１ページ目に入力されたキーワードが、２ページ目に渡すことができれば それで良いのです。