localStorage リロードしても値が消えないように

以下のコードで実行してみると、表の1マスごとに入力した内容が反映されています。
しかし、リロードするとlocalStorageで保存しているにも関わらず
全てがリセットされます。
コンソールで確認してみるとちゃんと情報は保存されているので
何が足りないのか把握できません。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <script src = "jquery-3.6.0.min.js"></script>
6  <title>Firebase Auth for Google</title>
7  <style type = "text/css">
8    a.allLink{
9      display:block;
10      text-decoration:none;
11    }
12
13    table{
14      margin:0 auto;
15    }
16    .subTitle{
17      text-decoration:underline;
18    }
19    /*モーダルを開くボタン*/
20    .modal-open{
21      cursor: pointer;
22    }
23    /*モーダル本体の指定 + モーダル外側の背景の指定*/
24    .modal-container{
25      position: fixed;
26      top: 0;
27      left: 0;
28      width: 100%;
29      height: 100%;
30      text-align: center;
31      background: rgba(0,0,0,50%);
32      padding: 40px 20px;
33      overflow: auto;
34      opacity: 0;
35      visibility: hidden;
36      transition: .3s;
37      box-sizing: border-box;
38    }
39    /*モーダル本体の擬似要素の指定*/
40    .modal-container:before{
41      content: "";
42      display: inline-block;
43      vertical-align: middle;
44      height: 100%;
45    }
46    /*モーダル本体に「active」クラス付与した時のスタイル*/
47    .modal-container.active{
48      opacity: 1;
49      visibility: visible;
50    }
51    /*モーダル枠の指定*/
52    .modal-body{
53      position: relative;
54      display: inline-block;
55      vertical-align: middle;
56      max-width: 500px;
57      width: 90%;
58    }
59    /*モーダルを閉じるボタンの指定*/
60    .modal-close{
61      position: absolute;
62      display: flex;
63      align-items: center;
64      justify-content: center;
65      top: -40px;
66      right: -40px;
67      width: 40px;
68      height: 40px;
69      font-size: 40px;
70      color: #fff;
71      cursor: pointer;
72    }
73    /*モーダル内のコンテンツの指定*/
74    .modal-content{
75      background: #fff;
76      text-align: left;
77      padding: 30px;
78    }
79    
80  </style>
81</head>
82<body>
83  <section>
84    <h1></h1>
85    <div id="info"></div>
86    <h1 class = "subTitle">時間割</h1>
87
88    <!--モーダル-->
89    <div class="modal-container">
90      <div class="modal-body">
91        <div class="modal-close">×</div>
92        <div class="modal-content">
93          <input id = "kougi1-1" type = "text" placeholder = "講義名を入力">
94          <select id = "selectRoom">
95            <option value = "">部屋番号を選択してください</option>
96            <option class = "1-101" value = "1-101">1-101</option>
97            <option value = "1-102">1-102</option>
98            <option value = "1-105">1-105</option>
99            <option value = "2-101">2-101</option>
100            <option value = "2-102">2-102</option>
101            <option value = "2-103">2-103</option>
102            <option value = "2-104">2-104</option>
103            <option value = "2-105">2-105</option>
104          </select>
105          <input id = "kakutei1-1" type = "submit" value = "確定">
106        </div>
107      </div>
108    </div>
109
110    <table border = "1" style = "border-collapse: collapse;"
111      <!--時間割-->
112      <tr>
113       <th></th>
114       <th>月</th>
115       <th>火</th>
116       <th>水</th>
117       <th>木</th>
118       <th>金</th>
119       <th>土</th>
120      </tr>
121      <!--1限-->
122      <tr>
123        <th>　1限　</th>
124        <th><a  class = "allLink modal-open MonOne">　　　　<br>　　　　</a></th>
125        <th><a  class = "allLink modal-open TuesOne">　　　　<br>　　　　</a></th>
126        <th><a  class = "allLink modal-open WednesOne">　　　　<br>　　　　</a></th>
127        <th><a  class = "allLink modal-open ThursOne">　　　　<br>　　　　</a></th>
128        <th><a  class = "allLink modal-open FriOne">　　　　<br>　　　　</a></th>
129        <th><a  class = "allLink modal-open SaturOne">　　　　<br>　　　　</a></th>
130      </tr>
131      <!--2限-->
132      <tr>
133        <th>　2限　</th>
134        <th><a  class = "allLink modal-open MonSec">　　　　<br>　　　　</a></th>
135        <th><a class = "allLink modal-open TuesSec">　　　　<br>　　　　</a></th>
136        <th><a  class = "allLink modal-open WednesSec">　　　　<br>　　　　</a></th>
137        <th><a  class = "allLink modal-open ThursSec">　　　　<br>　　　　</a></th>
138        <th><a  class = "allLink modal-open FriSec">　　　　<br>　　　　</a></th>
139        <th><a  class = "allLink modal-open SaturSec">　　　　<br>　　　　</a></th>
140      </tr>
141      <!--3限-->
142      <tr>
143        <th>　3限　</th>
144        <th><a  class = "allLink modal-open MonThr">　　　　<br>　　　　</a></th>
145        <th><a  class = "allLink modal-open TuesThr">　　　　<br>　　　　</a></th>
146        <th><a  class = "allLink modal-open WednesThr">　　　　<br>　　　　</a></th>
147        <th><a  class = "allLink modal-open ThursThr">　　　　<br>　　　　</a></th>
148        <th><a  class = "allLink modal-open FriThr">　　　　<br>　　　　</a></th>
149        <th><a  class = "allLink modal-open SaturThr">　　　　<br>　　　　</a></th>
150      </tr>
151      <!--4限-->
152      <tr>
153        <th>　4限　</th>
154        <th><a  class = "allLink modal-open MonFour">　　　　<br>　　　　</a></th>
155        <th><a  class = "allLink modal-open TuesFour">　　　　<br>　　　　</a></th>
156        <th><a  class = "allLink modal-open WednesFour">　　　　<br>　　　　</a></th>
157        <th><a  class = "allLink modal-open ThursFour">　　　　<br>　　　　</a></th>
158        <th><a  class = "allLink modal-open FriFour">　　　　<br>　　　　</a></th>
159        <th><a  class = "allLink modal-open SaturFour">　　　　<br>　　　　</a></th>
160      </tr>
161      <!--5限-->
162      <tr>
163        <th>　5限　</th>
164        <th><a  class = "allLink modal-open MonFive">　　　　<br>　　　　</a></th>
165        <th><a  class = "allLink modal-open TuesFive">　　　　<br>　　　　</a></th>
166        <th><a  class = "allLink modal-open WednesFive">　　　　<br>　　　　</a></th>
167        <th><a  class = "allLink modal-open ThursFive">　　　　<br>　　　　</a></th>
168        <th><a  class = "allLink modal-open FriFive">　　　　<br>　　　　</a></th>
169        <th><a  class = "allLink modal-open SaturFive">　　　　<br>　　　　</a></th>
170      </tr>
171      <!--6限-->
172      <tr>
173        <th>　6限　</th>
174        <th><a  class = "allLink modal-open MonSix">　　　　<br>　　　　</a></th>
175        <th><a  class = "allLink modal-open TuesSix">　　　　<br>　　　　</a></th>
176        <th><a  class = "allLink modal-open WednesSix">　　　　<br>　　　　</a></th>
177        <th><a  class = "allLink modal-open ThursSix">　　　　<br>　　　　</a></th>
178        <th><a  class = "allLink modal-open FriSix">　　　　<br>　　　　</a></th>
179        <th><a  class = "allLink modal-open SaturSix">　　　　<br>　　　　</a></th>
180      </tr>
181    </table>
182
183  </section>
184  <script>
185    let targetSlot = null;
186    //月曜1限
187
188    document.getElementById('kakutei1-1').onclick = function(){
189      var kougi = document.getElementById('kougi1-1').value;
190      var room = document.getElementById('selectRoom').value;
191      window.localStorage.setItem('myKougi',kougi);
192      window.localStorage.setItem('myRoom',room);
193      var getKougi = localStorage.getItem('myKougi');
194      var getRoom = localStorage.getItem('myRoom');
195      console.log(window.localStorage);
196      targetSlot.innerHTML = "「"+getKougi+"」"+"   "+getRoom;
197    };
198
199    //モーダルの動き
200    
201    $(function(){
202      // 変数に要素を入れる
203      var open = $('.modal-open'),
204      close = $('.modal-close'),
205      container = $('.modal-container');
206
207      //開くボタンをクリックしたらモーダルを表示する
208      open.on('click',function(){ 
209        targetSlot = this;
210        container.addClass('active');
211        return false;
212      });
213
214      //閉じるボタンをクリックしたらモーダルを閉じる
215      close.on('click',function(){  
216        container.removeClass('active');
217      });
218
219      //モーダルの外側をクリックしたらモーダルを閉じる
220      $(document).on('click',function(e) {
221        if(!$(e.target).closest('.modal-body').length) {
222          container.removeClass('active');
223        }
224      });
225    });
226    
227  </script>
228</body>
229</html>

m.ts10806

2022/01/29 09:55

console.logで確認されてるのでしょうか。ブラウザの開発ツールでWebStorageの保存値確認できたと思うのですが、そちらではどうでしょうか

Fujice

2022/01/29 10:06

はい。consoleでは確認できましたがリロードをすると表の中にある文字が消えてしまいます。保持したいのですが、方法が分からない状態です。

Fujice

2022/01/29 11:28

localStorage.setItem('myKougi',document.getElementById('kougi1-1').value); のような書き方をすると、ただしく文字入力したにも関わらず Storage {myRoom: '', myKougi: '', length: 2} と空白状態で出てしまいます。 setItemの第一、二引数は文字のみなんでしょうか？

Fujice

2022/01/29 11:51

恐らく、表それぞれのidが同じであるためエラーが起きているのかもしれません。 localStorageは諦めて他の方法を試してみます

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

回答1件

ベストアンサー

リロードしても消えないデータを実現するために localStorage を使うのはとても真っ当な選択です。データを入力するたびにlocalStorageに保存しているようですが、

入力したデータだけではなく、すべてのデータを保存する必要があります。
保存したデータを読み込むコードが必要です。DOMContentLoaded イベントで localStorage からすべてのデータを読み込んで各セルに書き込む、とか。

恐らく、表それぞれのidが同じであるためエラーが起きているのかもしれません。

いまのコードだと最後に入力したデータが前に入力したデータを上書きしますね。
自分だったら、全セルのデータを保持する2次元配列を常に持っておいて、それをJSON化したデータをlocalStorageに格納します。

投稿2022/01/29 14:22

int32_t

総合スコア22019

Fujice

2022/01/30 03:07

ありがとうございます！やってみましたが、私の書き方だと間違っている気がします。以下のコードを加えてみました。 //月曜1限 let schedule = [ //月曜日 [document.getElementsByClassName('MonOne'), document.getElementsByClassName('MonSec'), document.getElementsByClassName('MonThr'), document.getElementsByClassName('MonFour'), document.getElementsByClassName('MonFive'), document.getElementsByClassName('MonSix')], //火曜日 [document.getElementsByClassName('TuesOne'), document.getElementsByClassName('TuesSec'), document.getElementsByClassName('TuesThr'), document.getElementsByClassName('TuesFour'), document.getElementsByClassName('TuesFive'), document.getElementsByClassName('TuesSix')], //水曜日 [document.getElementsByClassName('WednesOne'), document.getElementsByClassName('WednesSec'), document.getElementsByClassName('WednesThr'), document.getElementsByClassName('WednesFour'), document.getElementsByClassName('WednesFive'), document.getElementsByClassName('WednesSix')], //木曜日 [document.getElementsByClassName('ThurOne'), document.getElementsByClassName('ThurSec'), document.getElementsByClassName('ThurThr'), document.getElementsByClassName('ThurFour'), document.getElementsByClassName('ThurFive'), document.getElementsByClassName('ThurSix')], //金曜日 [document.getElementsByClassName('FriOne'), document.getElementsByClassName('FriSec'), document.getElementsByClassName('FriThr'), document.getElementsByClassName('FriFour'), document.getElementsByClassName('FriFive'), document.getElementsByClassName('FriSix')], //土曜日 [document.getElementsByClassName('SaturOne'), document.getElementsByClassName('SaturSec'), document.getElementsByClassName('SaturThr'), document.getElementsByClassName('SaturFour'), document.getElementsByClassName('SaturFive'), document.getElementsByClassName('SaturSix')] ]; var scheduleJson = JSON.stringify(schedule); localStorage.setItem('Allschedule',scheduleJson); var getKoroom = localStorage.getItem('Allschedule'); document.getElementById('kakutei1-1').onclick = function(){ var kougi = document.getElementById('kougi1-1').value; var room = document.getElementById('selectRoom').value; window.localStorage.setItem('myKougi',kougi); window.localStorage.setItem('myRoom',room); var getKougi = localStorage.getItem('myKougi'); var getRoom = localStorage.getItem('myRoom'); console.log(window.localStorage); targetSlot.innerHTML = "「"+getKougi+"」"+" "+getRoom; }; window.addEventListener('DOMContentLoaded',(event)=>{ targetSlot.innerHTML = getKoroom; }); 書いてて混乱してきました。「DOMContentLoaded イベントで localStorage からすべてのデータを読み込んで各セルに書き込む」のやり方が分かりませんでした。差し支えなければ、このやり方についてご教示いただけますでしょうか？

int32_t

2022/01/31 00:11 編集

質問文のコードをできるだけ残すなら、 kakutei1-1 の click リスナーでやるのは、・targetSlot の更新をした後、・各セルのテキストを配列に入れる・それをJSON.stringify() して・それを localStorage に 'Allschedule' としてセットする DOMContentLoaded のリスナーでやることは、・localStorage の 'Allschedule' が取れたら、・その結果を JSON.parse() して・得られた配列のデータで、全セルのテキストを更新する。 localStorage.setItem(なんとか) した直後に localStorage.getItem(なんとか) するのはまったく意味がないです。ページロード時に getItem()、データ更新時に setItem() です。 const CELL_CLASSES = ['MonOne', 'MonTwo', ..., 'TuesOne', 'TuesTwo', ...] みたいなセルを特定するデータと配列要素を対応付けるデータを持っておくと、kakutei1-1 の click リスナーでも DOMContentLoaded のリスナーでも役立ちそうです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

	月	火	水	木	金	土
1限
2限
3限
4限
5限
6限

時間割

関連した質問