Как передать value инпутов в cookies ?

144

24 апреля 2018, 02:17

Задаю значение? через функцию setCookie и передаю value 4 инпутов в функцию storeValues.Потом достаю значение функцией getCookie, но в резльтате в куках: undefined. Помогите пожалуйста !

    const names = document.getElementById("name"); 
    const surname = document.getElementById("lastname"); 
    const age = document.getElementById("age"); 
    const phone = document.getElementById("phone"); 
    const search = document.getElementById("myInput"); 
    const add = document.getElementById("add_button"); 
    const table = document.getElementById("table"); 
 
    ///////////////////////create new user in table/////////////// 
 
        add.addEventListener('click', e => { 
                let tr  = document.createElement("tr"); 
                let tdN = document.createElement("td"); 
                tdN.innerHTML = names.value; 
            tr.appendChild(tdN); 
                let tdSn = document.createElement("td"); 
                tdSn.innerHTML = surname.value; 
                tr.appendChild(tdSn); 
                let tdA = document.createElement("td"); 
                tdA.innerHTML = age.value; 
                tr.appendChild(tdA); 
                let tdP = document.createElement("td"); 
                tdP.innerHTML = phone.value; 
                tr.appendChild(tdP); 
                let tdB = document.createElement("td"); 
                tr.appendChild(tdB); 
                let tdBd = document.createElement("button"); 
                tdBd.className = "delete"; 
                tdBd.innerHTML = "Yes"; 
                tdB.appendChild(tdBd); 
 
 
            if(names.value === "" || surname.value === "" || age.value === "" || phone.value === "") { 
                alert("fill in all the fields"); 
            } 
            else  { 
                table.appendChild(tr); 
 
            } 
 
            },false); 
 
//////////////////////////////delete  old and new items in table///////////////////////////// 
        document.addEventListener('click', e => { 
            const elem  = e.target; //// 
            if (elem.className === "delete") { 
                elem.parentNode.parentNode.parentNode.removeChild(elem.parentNode.parentNode); 
            } 
        },false); 
 
////////////////////////// searching elements by name in table/////////////////// 
        let seek = e => { 
          let filter, tr, td, i; 
          filter = search.value.toUpperCase(); 
          tr = table.getElementsByTagName("tr"); 
 
          for(i=0; i < tr.length; i++) { 
              td = tr[i].getElementsByTagName("td")[0]; 
              if (td) { 
                  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
                      tr[i].style.display = ""; 
                  } else { 
                      tr[i].style.display = "none"; 
                  } 
              } 
          } 
        }; 
 
 
    ///////////////////////My example for using cookies////////////////////////////// 
    let today = new Date(); 
    let expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days 
 
 
 
 
 
    function setCookie(name, value) 
    { 
        document.cookie= name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString(); 
 
 
        function storeValues(form) 
        { 
            setCookie("field1", form.names.value); 
            setCookie("field2", form.surname.value); 
            setCookie("field3", form.age.value); 
            setCookie("field4", form.phone.value); 
            return true; 
        } 
    } 
 
    function getCookie(name) 
    { 
        let re = new RegExp(name + "=([^;]+)"); 
        let value = re.exec(document.cookie); 
        return (value != null) ? unescape(value[1]) : null; 
    }

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="style.css"> 
    <title>address book</title> 
 
</head> 
<body> 
<div id="myDIV" class="header"> 
    <h2>My address book</h2> 
    <img src="Phonebook-512.png" alt="Picture"> 
    <input type="text" id="myInput" placeholder="Search for names" onkeyup="seek()"> 
</div> 
 
<div class="body"> 
    <div class="listInfo"> 
        <table class="table_dark" id="table"> 
            <tr> 
                <th>Name:</th> 
                <th>Surname:</th> 
                <th>Age:</th> 
                <th>Phone:</th> 
                <th>Remove ?</th> 
 
            </tr> 
            <tr> 
                <td>Luke</td> 
                <td>Skywoker</td> 
                <td>68</td> 
                <td>9379992</td> 
                <td><button class="delete">Yes</button></td> 
 
            </tr> 
 
        </table> 
    </div> 
<div class="InfoBlock"> 
 
        <h3>Add new contact:</h3> 
 
            <div class="field"> 
                <label for="name">Name: </label> 
                <input type="text" id="name" class="welcome-field"> 
            </div> 
            <div class="field"> 
                <label for="lastname">Lastname: </label> 
                <input type="text" id="lastname" class="welcome-field"> 
            </div> 
            <div class="field"> 
                <label for="age" >Age: </label> 
                <input type="number" id="age" class="welcome-field"> 
            </div> 
            <div class="field"> 
                <label for="phone">Phone: </label> 
                <input type="number" id="phone" class="welcome-field"> 
            </div> 
            <button id="add_button" type="button" onclick="setCookie()">Add</button> 
 
 
</div> 
<script src="main.js"></script> 
 
</body> 
</html>