> How to create local storage crud app in hindi
एक्सेल और एडवांस एक्सेल से जुड़े सभी लेटेस्ट विडियो पाने के लिए मेरे यूट्यूब चैनल को अभी सबस्क्राइब करे लिंक नीचे है धन्यवाद |

How to create local storage crud app in hindi

Tech Gyan Amit मई 04, 2025

 How to create local storage crud app in hindi 

दोस्तों आज की ब्लॉक पोस्ट पर हम CRUD एप्लीकेशन के बारे में देखेंगे जो केवल Javacript और Local Storage का (How to create local storage crud app in hindi |)उपयोग करता है | इस ऐप का उपयोग करते हुए आप अपने डेटा को ब्राउज़र में ही सेव कर सकते हैं अपडेट और डिलीट भी कर सकते हैं | इसके लिए कोई अलग से डेटाबेस है बैकऐंड की आवश्यकता नहीं होगी |  लोकल स्टोरेज में डाटा रहने से आप यदि ब्राउज़र को रिफ्रेश करते हैं तब भी आपका डाटा गायब नहीं होगा वह ऐसा ही रहेगा|  इस प्रोजेक्ट में  Javascript की की मूलभूत चीज जैसे कि DOM Manipulation, Event Handling और ब्राउज़र के Local Storage के साथ नीचे दिए गए वीडियो के माध्यम से सीख सकते हैं | 


Read Also This : - Business Software App

Feature:-

Data Add:-   आप फॉर्म भरकर आसानी से डाटा को ऐड कर सकते हैं |

Data Read:- फार्म द्वारा भरे गए डाटा को आप टेबल में देख सकते हैं |

Update Data: - किसी भी डाटा को यदि आप अपडेट करना चाहते हैं तो आप बटन पर क्लिक करके डाटा को अपडेट भी कर सकते हैं |

Delete Data:- इस तरीके से यदि आप किसी भी डाटा को डिलीट करना चाहते हैं तो आप डिलीट बटन पर क्लिक करके उसे डाटा को आसानी से डिलीट कर सकते हैं यह डाटा आपके लोकल स्टोरेज और टेबल दोनों से ही डिलीट हो जाएगा |

Local Storage:- इसमें लोकल स्टोरेज का उसे किया गया है तो अलग से आपको बैकऐंड की जरूरत नहीं पड़ेगी इसमें एक बात का ध्यान रखना है कि यह लोकल स्टोरेज केवल छोटे साइज के डाटा को स्टोर करने के लिए होते हैं बड़े साइज के दाता के लिए उपयोगी नहीं होता |





<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CRUD PROJECT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
        <div class="row mt-5">
            <h3 class="alert alert-info text-center">CRUD Project Using Html CSS And Javascript</h3>
            <div class="col-sm-4">
                <form action="" id="myform">
                    <h5 class="alert alert-warning text-center">User Form</h5>
                    <div class="mb-3">
                      <input type="number" name="rowNum" class="form-control" id="rowNum" placeholder="Enter rowNumber..." style="display: none;">
                    </div>
                    <div class="mb-3">
                        <input type="text" name="uname" class="form-control" id="uname" placeholder="Enter name...">
                    </div>
                    <div class="mb-3">
                        <input type="text" name="fname" class="form-control" id="fname" placeholder="Enter Father Name...">
                    </div>
                    <div class="mb-3">
                        <input type="number" name="phone" class="form-control" id="phone" placeholder="Enter Phone Number...">
                    </div>
                    <div class="mb-3">
                        <input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
                    </div>
                    <button id="btn" class="btn btn-primary">Submit</button>
                    <button id="u-btn" class="btn btn-primary">Update</button>
                </form>
            </div>
            <!-- html table Start -->
            <div class="col-md-8">
                <h3 class="alert alert-warning text-center">User Table</h3>
                <table class="table table-hover">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Father Name</th>
                        <th scope="col">Phone</th>
                        <th scope="col">Email</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody id="tbody">
                      
                    </tbody>
                </table>
            </div>
            <!-- html table End -->
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="java.js"></script>
  </body>
</html>



document.getElementById('btn').addEventListener('click', (event) => {
    event.preventDefault();
    let table = document.getElementById('tbody');
    let form = document.getElementById('myform');
    let name = document.getElementById('uname').value;
    let fname = document.getElementById('fname').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;

    let formObj = {
        name,
        fname,
        phone,
        email
    }
    table.innerHTML = "";
    // add data in localStorage
    let checkLocalStorage = localStorage.getItem('formData');
    let localStorageOutput = checkLocalStorage ? JSON.parse(checkLocalStorage) : []
    localStorageOutput.push(formObj)
    //    console.log(localStorageOutput)
    localStorage.setItem('formData', JSON.stringify(localStorageOutput));

    localStorageOutput.forEach((row, index) => {
        let rowNum = table.rows.length + 1;
        table.innerHTML += `
        
              ${rowNum}
              ${row.name}
              ${row.fname}
              ${row.phone}
              ${row.email}
              Edit Delete
            
`
    })

    // clear form Data

    form.reset();

})

// check localStorage on Dom Load
function loadStorageData() {
    let table = document.getElementById('tbody');
    let checkLocalStorage = localStorage.getItem('formData');
    let localStorageOutput = checkLocalStorage ? JSON.parse(checkLocalStorage) : [];
    localStorageOutput.forEach((row, index) => {
        let rowNum = table.rows.length + 1;
        table.innerHTML += `
        
              ${rowNum}
              ${row.name}
              ${row.fname}
              ${row.phone}
              ${row.email}
              Edit Delete
            
`
    })

}

loadStorageData()

//delete data And Update LocalStorage when click Delete Button
function deleteData(index) {
    let arrayObj = JSON.parse(localStorage.getItem('formData'))
    arrayObj.splice(index, 1)
    localStorage.setItem('formData', JSON.stringify(arrayObj))
    location.reload()
}

// show data in form When Click Edit Button


function updateData(btn) {
    let parentElement = btn.closest('tr');
    document.getElementById('rowNum').value = parentElement.children[0].innerText;
    document.getElementById('uname').value = parentElement.children[1].innerText;
    document.getElementById('fname').value = parentElement.children[2].innerText;
    document.getElementById('phone').value = parentElement.children[3].innerText;
    document.getElementById('email').value = parentElement.children[4].innerText;
}




// update data in local Storage and Table When Click Update Button

document.getElementById('u-btn').addEventListener('click',(event)=>{
    event.preventDefault()
    let rowIndex = document.getElementById('rowNum').value;
    let localStorageData = JSON.parse(localStorage.getItem('formData'))
    localStorageData[rowIndex -1]={
        name:document.getElementById('uname').value,
        fname:document.getElementById('fname').value,
        phone:document.getElementById('phone').value,
        email:document.getElementById('email').value,
    }

    localStorage.setItem('formData',JSON.stringify(localStorageData))
    location.reload()
})
Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

Thanks For Message Me if any issue please feel free to contact