Переменная localstaorage i не определена

Question

Я пытаюсь сохранить свое значение в таблице, но постоянно получаю одну ошибку: «TypeError: localStorage [i] не определен».это мой код HTML javascript.please проверить и помочь.

function mytable() {
                var retVal = confirm("Do you want to Submit data ?");
                   if( retVal == true ){
                    if (typeof(Storage) !== "undefined") {                      
                            var name = document.getElementById('name').value;
                            localStorage.setItem('name', name);
                            var namevalue = localStorage.getItem('name');

                            var email = document.getElementById('email').value;
                            localStorage.setItem('email', email);
                            var emailValue = localStorage.getItem('name');

                            var classname = document.getElementById('classname').value;
                            localStorage.setItem('classname', classname);
                            var classvalue = localStorage.getItem('class');

                            var grade = document.getElementById('grade').value;
                            localStorage.setItem('grade', grade);
                            var gradevalue = localStorage.getItem('grade');

                            var phone = document.getElementById('phone').value;
                            localStorage.setItem('phone', phone);
                            var phonevalue = localStorage.getItem('phone');

                            var hst = document.getElementById("MyclassTable");
                            document.write(localStorage.length);
                            if (localStorage.length == 0)
                            {
                                document.write("value is  0");
                            }
                            else{
                                document.write(localStorage.length);
                            }

это мой цикл for, но значение localalstoage [i] не определено.

                            for (var i = 0; i < localStorage.length; i++) {

                            //  alert(localStorage.length);
                hst.innerHTML = "<tr><td>" + localStorage[i].namevalue + "</td><td>" + localStorage[i].emailValue +
                         "</td><td>" + localStorage[i].classvalue +"</td><td>"+ localStorage[i].classvalue
                            + "</td><td>" + localStorage[i].gradevalue + "</td><td>" + localStorage[i].phonevalue + "</td></tr>";
                        }
                        } else {
                      document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
                        }

    // }
                            //  document.getElementById("result").innerHTML = localStorage.getItem("lastname");
                     return true;
                   }
                   else{
                      document.write ("User does not want to continue!");
                      return false;
                   }
        alert($('#valbox').val());

    };
      </script>

вот мой html-файл

<div class="container-contact100">
    <!-- <div class="contact100-map1" id="google_map"  data-pin="images/icons/student.jpg" data-scrollwhell="0" ></div>
    <div class="bg-image"></div> -->
    <div class="wrap-contact100">
        <div class="contact100-form-title" style="background-image: url(images/bg-01.jpg);">
            <span class="contact100-form-title-1">
                Student Information 
            </span>
        </div>

        <form class="contact100-form validate-form" id="mytable">
            <div class="wrap-input100 validate-input" data-validate="Name is required">
                <span class="label-input100">Full Name:</span>
                <input class="input100" type="text" name="name" id="name" placeholder="Enter full name">
                <span class="focus-input100"></span>
            </div>

            <div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
                <span class="label-input100">Email:</span>
                <input class="input100" type="text" name="email" id="email" placeholder="Enter email addess">
                <span class="focus-input100"></span>
            </div>
            <div class="wrap-input100 validate-input" data-validate="Class  is required">
                <span class="label-input100">Class:</span>
                <input class="input100" list="hosting-plan" type="text" id="classname" placeholder="Select your class">         
                <datalist id="hosting-plan">
                     <option value="small"/>
                        <option value="medium"/>
                     <option value="large"/>
                </datalist>
            </div>
            <div class="wrap-input100 validate-input" data-validate = "Valid Grade is required">
                <span class="label-input100">Grade :</span>
                <input class="input100" type="text" name="grade" id="grade" placeholder="Enter Grade addess">
                <span class="focus-input100"></span>
            </div>
            <div class="wrap-input100 validate-input" data-validate="Phone is required">
                <span class="label-input100">Phone:</span>
                <input class="input100" type="text" name="phone" id="phone" placeholder="Enter phone number">
                <span class="focus-input100"></span>
            </div>

            <div class="container-contact100-form-btn">
                <button class="contact100-form-btn" onclick="mytable()">
                    <span>
                        Submit
                        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                    </span>
                </button>
            </div>
        </form>

Моя таблица, в которой я хочу отобразить свои данные.

    <!-- <div class= "table"> -->
                    <table id="MyclassTable">
                            <tr>
                              <th>Name</th>
                              <th>Email</th>
                              <th>Class</th>
                              <th>Grade</th>
                              <th>phone</th>
                              </tr>
                      </table>
            <!-- </div> -->
            <div id="result"></div>

</div>
    </div>

Answer 1

Сохраните ваши данные как обычный массив javascript, а затем сохраните их в localStorage в виде строки.Когда вам это понадобится, снова проанализируйте его и обработайте.

const data = ['dogs', 'cats'];
localStorage.myData = JSON.stringify(data);

// Time to retrieve it back from localStorage
displayMyData(JSON.parse(localStorage.myData));