jsでページ遷移した際に、テキスト入力した値を保持したい。

前提・実現したいこと

制作順序に合わせてページをまたいで作っていくWeb上でのポスター作成ツールを開発しています。

発生している問題

しかし現在、ページをまたいだ時、次のページに前のページで挿入したテキストを表示させることができず困っています。下記のコードのjsのsessionStorageの部分で、id = a, id = b, id = cでinputしたテキストを保存し、次のページで表示したいです。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>poster-input-text</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src = "/send_url.js"></script>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">

        </div>
        <div class="header-right">
          <div id="humMenu">
            <input id="humCheck" type="checkbox">
            <label id="humOpen" for="humCheck"><span class = "fa fa-bars fa-2x"></span></label>
            <label id="humClose" for="humCheck"></label>
            <nav>
              <ul class="inner">
                <li><a href="/">TOP</a></li>
                <li><a href="#">みる</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <div class="action-wrapper" id="flex">
      <div id="sidebar">
        <aside>
          <h3>制作順序</h3>
          <ul>
            <li>1.モデル選択</li>
            <li>2.テキスト挿入</li>
            <li>3.テキストの彩色</li>
            <li>4.画像挿入＆保存</li>
            <li>5.お疲れ様でした</li>
          </ul>
        </aside>
      </div>
      <div class="container" id="board">
        <div class="heading">
          <h2>テキストを挿入しよう。</h2>
        </div>
        <div class="input-image">
          <div class="stuff">
            <div class="textBox">
            <input class="text" id = "a" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "b" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "c" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            </div>
          </div>


          <canvas id="rectangle" width="700" height="550"></canvas>
          <script type="text/javascript">
          //読み込み時に実行する
          onload = function() {
            /* 四角を描く */
            var rect_canvas = document.getElementById("rectangle");
            var rect_ctx = rect_canvas.getContext("2d");
            var rect_up = rect_canvas.getContext("2d");
            var rect_down = rect_canvas.getContext("2d");
            rect_ctx.beginPath();
            rect_up.beginPath();
            rect_down.beginPath();
            // 四角を描く(A4サイズ)
            rect_ctx.strokeRect(20, 20, 584.5, 413.5);
            rect_up.fillRect(60, 163, 500, 15);
            rect_down.fillRect(60, 288, 500, 15);
          }
          </script>

          <script type="text/javascript">
            var scanvas = sessionStorage.getItem("save_canvas");
            scanvas = JSON.parse(scanvas);
            console.log(scanvas)
          </script>
        </div>
        <div class="next">
          <input type="button" onclick="history.back()" value="戻る">
          <input type="button" onclick="location.href='./poster-color'" value="次へ">
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>poster-color</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src = "/send_url.js"></script>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">

        </div>
        <div class="header-right">
          <div id="humMenu">
            <input id="humCheck" type="checkbox">
            <label id="humOpen" for="humCheck"><span class = "fa fa-bars fa-2x"></span></label>
            <label id="humClose" for="humCheck"></label>
            <nav>
              <ul class="inner">
                <li><a href="/">TOP</a></li>
                <li><a href="#">みる</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
                <li><a href="#">・</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <div class="action-wrapper" id="flex">
      <div id="sidebar">
        <aside>
          <h3>制作順序</h3>
          <ul>
            <li>1.モデル選択</li>
            <li>2.テキスト挿入</li>
            <li>3.テキストの彩色</li>
            <li>4.画像挿入＆保存</li>
            <li>5.お疲れ様でした</li>
          </ul>
        </aside>
      </div>
      <div class="container" id="board">
        <div class="heading">
          <h2>テキストに色をつけよう。</h2>
        </div>
        <div class="input-image">
          <div class="stuff">
            <div class="textBox">
            <input class="text" id = "a" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "b" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            <input class="text" id = "c" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/>
            </div>
          </div>


          <canvas id="rectangle" width="700" height="550"></canvas>
          <script type="text/javascript">
          //読み込み時に実行する
          onload = function() {
            /* 四角を描く */
            var rect_canvas = document.getElementById("rectangle");
            var rect_ctx = rect_canvas.getContext("2d");
            var rect_up = rect_canvas.getContext("2d");
            var rect_down = rect_canvas.getContext("2d");
            rect_ctx.beginPath();
            rect_up.beginPath();
            rect_down.beginPath();
            // 四角を描く(A4サイズ)
            rect_ctx.strokeRect(20, 20, 584.5, 413.5);
            rect_up.fillRect(60, 163, 500, 15);
            rect_down.fillRect(60, 288, 500, 15);
          }
          </script>
        </div>
        <div class="next">
          <input type="button" onclick="history.back()" value="戻る">
          <input type="button" onclick="location.href='./poster-input-image'" value="次へ">
        </div>
      </div>
    </div>
  </body>
</html>

試したこと

sessionStorageに関するサイトを読みあさり、試してみましたが、解決することができませんでした。

言語など

・node.js
・express
・javascript
・html
・css
・jquery

行動規範の内容に同意します

回答1件

ベストアンサー

Mozilla: SessionStorage

提出したコードにはgetItemしか見当たらなかったです。
setItemをしなければ、getItemはどこからデータを取るのでしょうか？
setItemでデータを保存して、getItemでデータを取得しましょう。

Javascript
1// sessionStorage にデータを保存する
2sessionStorage.setItem('key', 'value');
3
4// sessionStorage に保存したデータを取得する
5var data = sessionStorage.getItem('key');
6
7// sessionStorage に保存したデータを削除する
8sessionStorage.removeItem('key')

投稿2021/12/19 10:32

skys215

総合スコア910

josikikusokurae

2021/12/19 10:47

すみません。見落としていました。最初のコードでsetItem、次のコードでgetItemをして、テキストを保持しようと思っています。その場合、key, valueはどのようになるのか教えていただけないでしょうか？

skys215

2021/12/19 10:54

var data = sessionStorage.getItem('key'); dataはvalueになります。

josikikusokurae

2021/12/19 12:13

ここではkeyとvalueには何を入れるべきでしょうか？考えてもこの部分のjsの全体像が全く掴めないので教えてもらえないでしょうか？

skys215

2021/12/19 14:41

どのjsオブジェクトでも構いません。簡単に言うと、keyは変数名。valueはどの値でもよろしいです。

josikikusokurae

2021/12/20 08:28

ここではinputテキストを id = "a" としており、jsで var texta = document.getElementById("a"); sessionStorage.setItem("texta", "data"); としており、次ページで var data = sessionStorage.getItem("texta"); console.log(data); としています。これは何か間違っていますでしょうか？

skys215

2021/12/20 13:40

logには"data"が出力される筈ですね。 var texta = document.getElementById("a"); sessionStorage.setItem("texta", texta.value); var data = sessionStorage.getItem("texta"); console.log(data); とすると、aのvalueが出力されます。

josikikusokurae

2021/12/20 14:06

ご説明ありがとうございます。前のページで var texta = document.getElementById("a"); sessionStorage.setItem("texta", texta.value); とし、次のページで var data = sessionStorage.getItem("texta"); console.log(data); としたのですが、 id = "a"のテキストは次のページに現れませんでした。なぜでしょうか？

skys215

2022/01/07 02:06

次のページではstorageから得た値をaに渡さないと表示されません。 document.getElementById("a").innerText = data

行動規範の内容に同意します