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

منذ 4 سنوات imadbelasri Javascript
JS

فهاد الدرس الجديد من سلسلة 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;
}
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

فهاد الدرس الجديد غادي نشوفو كيفاش نصوبو واحد التطبيق بسيط لي كيعرض سعر صرف العملات فمثلا المستخدم ك...


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

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


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نبرمجو ساعة فالساعة غادي تكون كتعرض الوقت الح...


JS

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

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...