كيفاش تسجل المعلومات فل local storage ديال navigateur
فهاد الدرس الجديد من سلسلة 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;
}
