Question

这是我的代码：首先，我为本地存储创建功能。其他。在第一次运行中一切都好。但是当我重新加载页面时，我的其他功能无法正常工作

var editUser = document.getElementById('users_list');

      editUser.addEventListener("blur", (function() {
        localStorage.setItem('todoData', this.innerHTML);
      }));

      if(localStorage.getItem('todoData')) {
        editUser.innerHTML = localStorage.getItem('todoData');
      }

 var addUser = document.getElementById('add_user'),
     usersList = document.getElementById('users_list'),
     userTemplate = document.getElementsByClassName('user_data'),
     deleteUser = document.getElementsByClassName('delete_user'),
     userImage = document.getElementsByClassName('user_image'),
     idNum = 0;

 var closePopup = document.getElementById("popup_close"),
    overlay = document.getElementById("overlay"),
    popup = document.getElementById("popup"),
    popupContent = document.getElementById("popup_content");

//Function for adding elements
addUser.addEventListener('click', (function() {
    var newUser = userTemplate[0].cloneNode(true);

    // add id.
    newUser.getElementsByClassName('user_data_id')[0].innerHTML += ' ' + idNum++;

    // make this user visible
    newUser.style.display = '';

    // Wire click event to remove this user.
    newUser.getElementsByClassName('delete_user')[0].addEventListener('click', (function() {            
        usersList.removeChild(newUser);
    }));

    newUser.getElementsByClassName('user_image')[0].addEventListener('click', (function() {            
         overlay.style.display = 'block';
         popup.style.display = 'block';
         popupContent.innerHTML = this.parentNode.innerHTML;
    }));

    closePopup.onclick = function() {
        overlay.style.display = 'none';
        popup.style.display = 'none';
    };

    usersList.appendChild(newUser);
}));

// Add one user
addUser.click();

这是我的HTML：

<div id="overlay"></div>
<div id="popup">
    <div class="popup_controls">
        <span id="popup_close">X</span>
    </div>
    <div id="popup_content">
        <h1>Some Popup Content</h1>
    </div>
</div>

<div class="col-md-6 col-md-offset-3 text-center">
    <h2>Hello, admin</h2>
    <p><a href="#/login">Logout</a></p>
    <h2>List of users</h2>

    <button class="btn btn-primary btn-block" id="add_user">Add new user</button>
    <ul id="users_list" contenteditable="true">

        <li class="user_data" style="display: none;">
            <img src="http://img.dunyanews.tv/blog_user_images/anchors//15_user_icon.png" alt="user" class="user_image" />
            <div class="user_data_id text-left">Id:</div>
            <div class="user_data_username text-left">Username:</div>
            <div class="user_data_firstname text-left">Firstname:</div>
            <div class="user_data_lastname text-left">Lastname:</div>
            <button class="btn btn-danger delete_user">X</button>
        </li>
    </ul> 


</div>

我真的希望有人会帮助我。这对我来说非常重要

本地存储有问题。重新加载页面后，我的功能不起作用。我该怎么办？

0 个答案: