كيفاش تسجل المعلومات فل local storage ديال navigateur

منذ 4 سنوات imadbelasri Javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال navigateur فغادي نقادو واحد ل app بسيطة عبارة عن contacts app كتمكن المستخدم من تسجيل الهواتف ديال الناس لي كيعرف من بعد كيمكنلو يمسح لي بغا.

تحميل الكود

نظرة سريعة بالفيديو

1- الملف index.php

فاول حاجة كنزيد dossier جديد سميه js_contact زيدو ف localhost منبعد فيه زيد 3 دالملفات واحد index.php والثاني style.css والثالت script.js منبعد ف index.php غادي نزيد structure ديالي فعندي روابط لمفات css و js وعندي input لي كتاخد id contact-phone وكاين bouton لي كتاخد id add وعندي div عطيتها id contacts-list فيها غادي يتعرضوا les contacts لي مسجلين عندي الكود ديال الملف هو :

عرض الكود

                                                    
                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Js Contact</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Contacts</h2>
            <div class="contact">
                <input type="text" name="contact-phone" id="contact-phone" placeholder="Nom & Prénom & Tél">
                <button class="btn btn-primary" id="add">Valider</button>
            </div>
            <div id="contacts-list">
                
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>

2- الملف script.js

فالملف script.js غادي يكون عندي les fonctions لي غادي يمكنوني باش ندير les opérations ديالي فكاين get_contacts لي كتمكن من استرجاع les contacts من local storage ولي يمكنلك تدخلو بالضغط على f12 من بعد عندي add_contact لي كتمكن من اضافة contact من بعد مكنسترجع القيمة لي كاينة فل input ولي كنسترجعها بل id لي عطيت لل input منبعد كنزيد ل objet منبعد مكنحولو ل string وكنعيط لل fonction show لي كتمكن من عرض les contacts لي عندي ف div contacts-list لي سبق وهضرنا عليها فكنسترجع les contacts بل fonction get_contacts من بعد كنخدم ب for باش كن créer واحد liste لي كتاخد les contacts ومنبعد كنزيدها ل div لي عطينها ل id contacts-list وكنزيد داخل ل ul واحد ل bouton لي كتمكن من مسح contact ولي كنخدم ب for باش كنزيد ل كل bouton ل event click ولي ملي كيكليكي المستخدم كترسل ل id ديال ل contact ل fonction removeContact لي كتمكن من مسح contact منبعد كنسترجع ل bouton لي كيمكن من إضافة contact بل id وكنزيدلو ل event on click لي كينفد ل fonction add_contact الكود ديال الملف هو :

عرض الكود

                                                        
                                                            function get_contacts(){
    var contacts = new Array();
    var contact_str = localStorage.getItem('contact');
    if(contact_str !== null){
        contacts = JSON.parse(contact_str);
    }
    return contacts;
}
function add_contact(){
    var contact = document.getElementById('contact-phone').value;
    var contacts = get_contacts();
    contacts.push(contact);
    localStorage.setItem('contact',JSON.stringify(contacts));
    $('#contact-phone').val("");
    show();
    return false;
}
function removeContact(){
    var id = $(this).attr('id');
    var contacts = get_contacts();
    contacts.splice(id,1);
    localStorage.setItem('contact',JSON.stringify(contacts));
    show();
    return false;
}
function show(){
    var contacts = get_contacts();
    var html = '<ul>';
    for(var i = 0;i < contacts.length;i++){
        html += '<li class="contacts">'+ contacts[i] + ' <button class="btn-delete" id="'+ i +'">Supprimer</button>' +'</li>';
    }
    html += '</ul>';
    $('#contacts-list').html(html);
    var buttons = document.getElementsByClassName('btn-delete');
    for(var i = 0;i < buttons.length;i++){
        buttons[i].addEventListener('click',removeContact);
    }

}
var add = document.getElementById('add');
add.addEventListener('click',add_contact);
show();

3- الملف style.css

فالملف style.css كنزيد les styles css لي غادي نحتاج الكود ديال الملف هو :

عرض الكود

                                                        
                                                            body{
    background-color: #F4F4F4;
}
.container{
    width: 1110px;
    margin: 0 auto;
}
.row{
    background-color: #ffffff;
    margin: 0 auto;
    width: 50%;
    border-radius: 5px;
    text-align: center;
    padding-bottom: 20px;
}
.row h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 30px;
    padding: 10px;
    border-bottom: 1px solid #e7a109;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.753);
}
.btn{
    background-color: #e7a109;
    padding: 8px;
    color: #F4F4F4;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border: none;
    border-radius: 5px;
}
.btn-delete{
    background-color: #b62910;
    padding: 4px;
    color: #F4F4F4;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 300;
    font-size: 10px;
    border: none;
    border-radius: 5px;
}
.btn-delete:hover{
    background-color: #b62910;
    cursor: pointer;
}
.btn:hover{
    background-color: #e79909;  
    cursor: pointer;
}
.contact{
    margin: 20px auto;
}
input{
    padding: 10px;
    width: 50%;
    border: 1px solid #F4F4F4;
}
.contacts{
    list-style: none;
    background-color: #f59504;
    width: 50%;
    text-align: center;
    color: #FFF;
    border-bottom: 1px solid #FFF;
    margin: 0 auto;
    padding: 10px 0;
}
.contacts li{
    display: block;
    margin-bottom: 10px;
}