Jinsi ya Kutengeneza Form Auto-Save kwa LocalStorage

Kuna wakati unapojaza fomu ndefu mtandaoni na browser ikifungwa au ukurasa ukirefresh, data inaweza kupotea. Suluhisho ni kutumia LocalStorage na JavaScript ili fomu yako ihifadhiwe mojamoja kila mtu anapobadilisha input. Hii inahakikisha data yako inabaki salama hadi mtumiaji atume fomu.

Hatua kwa Hatua
1️⃣ Unda HTML Form
<form id="myForm">
<label for="name">Jina:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="message">Ujumbe:</label>
<textarea id="message" name="message"></textarea><br><br>

<button type="submit">Tuma</button>
</form>
<script src="autosave.js"></script>

2️⃣ Andika JavaScript kwa Auto-Save
const form = document.getElementById('myForm');
const fields = ['name', 'email', 'message'];

// Load data iliyohifadhiwa
window.addEventListener('DOMContentLoaded', () => {
fields.forEach(field => {
const savedValue = localStorage.getItem(field);
if (savedValue) document.getElementById(field).value = savedValue;
});
});

// Hifadhi data kila mtu anapobadilisha
fields.forEach(field => {
document.getElementById(field).addEventListener('input', (e) => {
localStorage.setItem(field, e.target.value);
});
});

// Futa data baada ya submit
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Data imehifadhiwa!');
fields.forEach(field => localStorage.removeItem(field));
form.reset();
});

3️⃣ Faida Muhimu

Hifadhi data kwenye browser bila server.

Inafanya kazi kwa forms ndefu au blog posts drafts.

Data inabaki salama hata baada ya refresh au kufunga browser.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509