Offline data handle kwa kutumia javascript

Katika somo hili tutaenda kujifunza namna ya kuhifadhi taarifa za mtumiaji endapo mtandao utakuwa haupo ()

Jiunge nasi WhatsApp

TATIZO HALISI TUNALOTATUA

Katika matumizi ya kawaida:

Mtumiaji anaweza kujaza form
Mtandao ukakatika
Taarifa zinapotea
Mtumiaji anakasirika

Lengo:

Kuhifadhi data ya mtumiaji ikiwa mtandao haupo,
na kuituma mara tu mtandao utakaporudi automatical.

CONCEPT KUU (IDEA YA MFUMO)

Mfumo wetu unafanya vitu vinne:

Kusoma data ya mtumiaji
Kuthibitisha kama imejazwa vizuri
Kukagua kama mtandao upo
Kuhifadhi au kutuma data kulingana na hali ya mtandao

HATUA YA 1: KUELEWA HTML KWANZA

Kazi ya HTML ni nini?

HTML hutengeneza muonekano wa ukurasa na sehemu ambazo mtumiaji ataingiliana nazo.

Katika mfumo wetu tunayo form:

<div>

<form id="my_form">

<label for="name">Name:</label> <br>

<input type="text" id="user_name" placeholder="Name..."><br><br>

<label for="email">Email</label><br>

<input type="email" id="email" placeholder="example@gmail.com"><br>

<br>

<input type="submit" value="Send">

<p><em id="em"></em></p>

</form>

</div>

Katika eneo hili <form id="my_form">

Hii id="my_form" inatuwezesha kuifikia form kupitia JavaScript.

Ndani ya form kuna input hizi:

<input type="text" id="user_name">
<input type="email" id="email">

Kila input ina id ya kipekee:

user_name
email

Hizi ndizo JS inazitafuta baadaye.

HATUA YA 2: KUUNGANISHA HTML NA JAVASCRIPT

JavaScript inasema:

Hii inamaanisha:

"Nipe element ya HTML yenye id = my_form"

HATUA YA 3: KUSIKILIZA TENDO LA MTUMIAJI

Hii inamaanisha:

"Mtumiaji akibonyeza Send, fanya kazi fulani."

HATUA YA 4: KUSOMA TAARIFA KUTOKA HTML

Hii inatafsiriwa hivi:

Sehemu	Maana
`document`	Ukurasa mzima wa HTML
`querySelector("#user_name")`	Tafuta element yenye id `user_name`
`.value`	Chukua maandishi aliyoyaandika mtumiaji

Kwa hiyo:

JavaScript inasoma kile kilichoandikwa kwenye <input id="user_name">

Vivyo hivyo:

HATUA YA 5: KUHAKIKI DATA

Kabla ya kufanya lolote, mfumo unasema:

"Je, data imejazwa?"

Hii huzuia fomu tupu.

HATUA YA 6: KUANGALIA HALI YA MTANDAO

Hii ndiyo akili ya mfumo:

Hali	Hatua
Mtandao upo	Tuma data
Mtandao haupo	Hifadhi data

HATUA YA 7: KUHIFADHI DATA

Tunaiambia browser:

"Hifadhi data hii mpaka nitakapoirudia."

HATUA YA 8: KUTUMA DATA MTANDAO UKIRUDI

Browser inaposema:

"Sasa nina mtandao"

Mfumo unasema:

"Angalia kama kuna data iliyohifadhiwa, itume."

HATUA YA 9: KUSAFISHA BAADA YA MAFANIKIO

Hii huzuia kutuma mara mbili.

HITIMISHO KWA MWANAFUNZI

JavaScript haisomi data hewani.
Inaisoma kutoka kwenye HTML.
Ndiyo maana lazima tuanze na HTML kwanza.

Tazama Code nzima hapa

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Form</title>

</head>

<body>

<div>

<form id="my_form">

<label for="name">Name:</label> <br>

<input type="text" id="user_name" placeholder="Name..."><br><br>

<label for="email">Email</label><br>

<input type="email" id="email" placeholder="example@gmail.com"><br>

<br>

<input type="submit" value="Send">

<p><em id="em"></em></p>

</form>

</div>

<script>

const form = document.getElementById('my_form')

form.addEventListener('submit', async function (ev) {

ev.preventDefault()

// pata taarifa kutoka kwenye form

let emphasise = document.getElementById('em')

let user_name = document.querySelector("#user_name").value

let email = document.querySelector("#email").value

if (user_name.trim() === ""){

emphasise.textContent = "Name is required!";

return;

}

if (email.trim() === ""){

emphasise.textContent = 'Email is require!';

return;

}

emphasise.textContent = ""

form.reset()

// Unda objects ya taarifa zoote

let userData = {user_name, email}

// Angalia kama hakuna mtandao

if (! navigator.onLine){

alert('hakuna mtandao, tunaifadhi taarifa zako mpaka utakaporudi hewani!')

// Hifadhi taarifa kwenye localStorage

localStorage.setItem('pendingData', JSON.stringify(userData))

}else{

await saveUserInfo(userData)

}

});

// Tuma taarifa za mtumiaji kama mtandao upo.

async function saveUserInfo(userData) {

// Hapa ndipo unaweza kutuma taarifa hizi rasmi kwenye server na

// kuzipokea na PHP rwap string

const data = userData

let Name = data.user_name

let email = data.email

               alert(`Taarifa ya mafanikio kwa kutuma taarifa za ${Name.toUpperCase()} na barua pepe ${email.toLowerCase()}`)

//Futa data kutoka kwenye LocalSrorage baada ya kutuma taarifa

let savedData = localStorage.getItem('pendingData')

if(savedData){

localStorage.removeItem('pendingData')

}

// Angalia kawa kifaa kimepata mtandao

window.addEventListener('online', async function() {

// Angalia kama kuna data yoyote

let pendingData = localStorage.getItem('pendingData')

// Rudisha data kuwa encoded

let get_data = JSON.parse(pendingData)

await saveUserInfo(get_data)

})

</script>

</body>

</html>

Jiunge nasi WhatsApp kupata update zetu

Jiunge nasi WhatsApp

Zoezi la Maswali

Nyuma Endelea

Umeionaje Makala hii.. ?

Author: Emmanueli

Tarehe: 2025-12-27 19:24:12 Topic: JavaScript Main: Masomo File: Download PDF Views 555

Share On:

Share follows: 0 | Unique share links followed: 0

Sponsored links
👉1 Madrasa kiganjani 👉2 Kitau cha Fiqh 👉3 Bongolite - Game zone - Play free game 👉4 Tafasiri ya Riyadh Swalihina 👉5 ai web app 👉6 kitabu cha Simulizi

Post zinazofanana:

JAVASCRIPT - somo la 9: Jinsi ya kuandika function kwenye javascript

Katika somo hili utakwenda kujifunza jinsi ya kuandika function kwenye javascript. Utajifunz apia namna ya kuitumia function hiyo

Soma Zaidi...

JAVASCRIPT - somo la 5: Jinsi ya kupangilia maandishi wakati wa ku output kwenye javascript

Katika somo hili utajifunza jinsi ya kupangilia muonekano wa maandishi (text) wakati wa ku out put matokeo ya code

Soma Zaidi...

JAVASCRIPT - somo la 8: Aina za data zinazotumika kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu aina za data ambazo hutumika kwenye javascript

Soma Zaidi...

JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript

Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza kutumia javascript kutengeneza kikokotoo cha hesabu yaani calculator

Soma Zaidi...

Game 1: Jinsi ya kutengeneza game ya tic toc ya wachezaji wawili kwa kutumia html, css na javascript

Katika post hii utakwenda kujifundisha jinsi ya kutengeneza game ya tic toc ya wachezaji wawii kwa utumia html, css na javascript

Soma Zaidi...

JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba

Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba

Soma Zaidi...