javascript - 在本地存储的主页上显示数据

问题描述

我正在制作一个将用户保存在本地存储中的网站，我的问题是我需要在主页上显示用户，即用户登录，在表格中显示主页上的用户，我不知道这样做，我尝试了这段代码

  <!DOCTYPE html>
    <html lang="es-ES">
    
    <head>
        <title>Libreria F. Morazan</title>
        <meta charset="utf-8" />
    </head>
    
    <body>
    
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
    
                    <h1 class="jumbotron">Ejemplo de CRUD usando Local Storage</h1>
    
                    <table id="grid" class="table table-striped">
                        <thead>
                            <tr>
                                <th id="name">Name</th>
                                <th id="email">Correo</th>
                                <th id="username">Usuario</th>            
                                <th id = "password">contraseña</th>
                                <th style="width:80px;"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="main.js"></script>
        <script src="login.js"></script>
        </html>

/在主页显示用户的脚本/

<scrip main>
 for (i=0; i<localStorage.length; i++) {
    var users = [],
        dataInLocalStorage = localStorage.getItem(localStorage.key(i)),
        gridBody = document.querySelector('#grid tbody');

    if (dataInLocalStorage !== null) {
        users = JSON.parse(dataInLocalStorage);
    }

    alert(users);
    // Draw TR from TBODY
    gridBody.innerHTML = '';

   users.forEach(function (x, i) {
        var fila = document.createElement("tr"),
            tdName = document.createElement("td"),
            tdJob = document.createElement("td"),
            tdAge = document.createElement("td"),
            tdps = document.createElement("td"),
            tdRemove = document.createElement("td"),
            btnRemove = document.createElement("button");

        tdName.innerHTML = x.name;
        tdJob.innerHTML = x.email;
        tdAge.innerHTML = x.username;
        tdps.innerHTML = x.password

        btnRemove.textContent = 'Remove';
        btnRemove.className = 'btn btn-xs btn-danger';
        btnRemove.addEventListener('click', function(){
            removeFromLocalStorage(i);
        });

        tdRemove.appendChild(btnRemove);

        fila.appendChild(tdName);
        fila.appendChild(tdJob);
        fila.appendChild(tdAge);
        fila.appendChild(tdRemove);

        gridBody.appendChild(fila);
    });
}

/ js将用户保存在localstorage中/

<scrip libreria>
window.onload = function () {
  var localStorageKeyName;

  document
    .querySelector("#create-account")
    .addEventListener("click", function () {
      localStorageKeyName = document.getElementById("email").value; 
      var name = document.getElementById("name"),
        correo = document.getElementById("email"),
        usuario = document.getElementById("username"),
        contraseña = document.getElementById("password");
      confContrasenia = document.getElementById("password-again");

      // Validate
      if (
        name.value.length === 0 ||
        correo.value.length === 0 ||
        usuario.value.length === 0 ||
        contraseña.value.length === 0
      ) {
        alert("Ingrese todos los campos");
      } else {
        if (contraseña.value == confContrasenia.value) {
          var user = {
            name: name.value,
            correo: correo.value,
            usuario: usuario.value,
            contraseña: contraseña.value,
          };

          // Clean data
          name.value = "";
          correo.value = "";
          usuario.value = "";
          contraseña.value = "";
          // Append to my localStorage
          appendObjectToLocalStorage(user);
          window.location.replace("login.html");
        } else {
          alert("Las contraseñas no son iguales, ingreselas una vez mas!");
          location.href("index.html");
        }
      }
    });

  function appendObjectToLocalStorage(obj) {
    var users = [],
      dataInLocalStorage = localStorage.getItem(localStorageKeyName);

    if (dataInLocalStorage !== null) {
      users = JSON.parse(dataInLocalStorage);
    }

    users.push(obj);

    localStorage.setItem(localStorageKeyName, JSON.stringify(users));
  }
};

标签： javascripthtmlcssarraysjson

javascript - 在本地存储的主页上显示数据

问题描述

解决方案

推荐阅读