Question

我正在尝试使用更多OOP方法构建一个简单的地址簿应用程序。

目前它没有问题地添加到localStorage;但我想要完成的下一个任务是显示Key =＆gt;的函数。 HTML中的值对。我陷入了第一道障碍。

当我在click事件上调用displayContacts()函数时，它会在LocalStorage中创建另一个空对象。每次我重新加载页面并单击“查找”按钮（并假设没有向表单添加其他信息），新的条目将添加到localStorage，例如：

{ “first_name的”： “”， “姓氏”： “”， “电子邮件”： “”， “电话”： “”}

提前致谢

＆LT; ！ - begin snippet：js hide：false console：true babel：false - ＆gt;

 var addressBook = {

    people : JSON.parse(localStorage.getItem('contacts')) || [],


    cacheDom : function(){
        this.$parent = $('.address_book');
        this.$display = $('.find_contacts');
    },

    bindEvent : function(){
        this.$parent.on('submit', this.getFormData.bind(this)); 
        this.$display.on('click', this.displayContacts.bind(this));

    },

    getStorage : function(param){
        return localStorage.getItem(); 
    },

    setStorage : function(){
        var storage = localStorage.getItem("contacts");
                localStorage.setItem("contacts", JSON.stringify(this.people));

            },

    displayContacts : function(){
            var contacts = this.people;
            console.log(contacts);

    },

    getFormData : function(e){
        var contacts = {};
        var target = e.target.length;
        for(var i = 0; i < target; i++){
            if(e.target[i].nodeName === "INPUT"){
                contacts[e.target[i].name] = e.target[i].value;
                /*console.log(contacts);*/
            }
        }

        this.people.push(contacts);
        this.setStorage();


        return false;
    },




    render: function(){

    },

    init : function(){
        this.cacheDom();
        this.bindEvent();
        this.setStorage();
    }
}

addressBook.init();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <link href="./bootstrap-3.3.7-dist/css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="row wrapper">
        <div class="col-md-4 input_field">

            <form class="address_book" method="post">
                <div class="form-group">
                    <label for="exampleInputEmail1">First Name</label>
                    <input type="text" class="form-control first_name" id="exampleInputEmail1" placeholder="First Name" name="first_name">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Last Name</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Last Name" name="last_name">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Telephone</label>
                    <input type="number" class="form-control" id="exampleInputPassword1" placeholder="Phone Number" name="telephone">
                </div>


                <button type="submit" class="btn btn-default submit_to_storage">Submit</button>
                <button type="edit" class="btn btn-default submit_to_storage">edit</button>
                <button type="delete" class="btn btn-default submit_to_storage">delete</button>
                <button type="find" class="btn btn-default find_contacts">find</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-push-10 output">

        </div>

    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/localStorage.class.js"></script>
</body>

</html>

Answer 1

您的按钮属于find

类型

<button type="find" class="btn btn-default find_contacts">

这不是有效类型，而是按钮返回默认类型submit。

表单中的submit按钮提交表单，因此您不仅要调用按钮上的click处理程序，还要调用表单的submit处理程序，插入localStorage。

这就是为什么当你点击按钮时它会插入到localStorage中要解决此问题，请向所有不应提交表单的按钮添加button类型。

<button type="submit" class="btn btn-default submit_to_storage">Submit</button>
<button type="edit" class="btn btn-default submit_to_storage">edit</button>
<button type="delete" class="btn btn-default submit_to_storage">delete</button>
<button type="find" class="btn btn-default find_contacts">find</button>

按钮的唯一有效类型是

提交
重置
按钮

localstorage中的重复条目 - Javascript

1 个答案: