ここでの主な問題は、ドキュメントの準備です。これは一般的な jQuery Mobile の問題です。sessionStorage を読み取るためにページを更新する必要はありません。
必要なことは、適切な jQuery Mobile ページ イベントを使用することです。Document ready は、基本的な jQuery でのみ使用する必要があります。jQuery Mobile の場合、通常、ページが DOM に正常にロードされる前にトリガーされます。
これについて詳しく知りたい場合は、私の他の回答を読んでください: jQuery Mobile: document ready vs page events
jQueryで最初に学ぶことは、 $(document).ready()関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobileでは、Ajax を使用して、ナビゲートするときに各ページのコンテンツを DOM にロードします。このため、最初のページが読み込まれる前に$(document).ready()がトリガーされ、ページ操作を目的としたすべてのコードがページの更新後に実行されます。これは非常に微妙なバグである可能性があります。一部のシステムでは正常に動作しているように見えるかもしれませんが、他のシステムでは、不規則で繰り返すのが困難な奇妙な現象が発生する可能性があります。
従来の jQuery 構文:
$(document).ready() {
});
この問題を解決するために (これは問題だと信じてください)、jQuery Mobile開発者はページ イベントを作成しました。簡単に言うと、ページ イベントは、ページ実行の特定の時点でトリガーされるイベントです。これらのページ イベントの 1 つはpageinitイベントで、次のように使用できます。
$(document).on('pageinit', function(){
});
さらに進んで、ドキュメント セレクターの代わりにページ ID を使用できます。id indexを持つ jQuery Mobile ページがあるとします。
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
インデックス ページでのみ使用できるコードを実行するには、次の構文を使用できます。
$('#index').on('pageinit') {
});