محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>JSON Stringify Function</h1>
    <form>
        <label>First Name</label>
        <input id="firstName"/>
        <br><br>
        <label>Last Name</label>
        <input id="lastName"/>
        <br><br>
        <button onclick="storeData()" type="button">Store Data</button>
    </form>
    
    <script>
        function storeData() {
            // lastNameValue و firstNameValue هنا قمنا بتخزين قيم الحقول في المتغيرات
            const firstNameValue = document.querySelector('#firstName').value;
            const lastNameValue = document.querySelector('#lastName').value;

// و وضع كل قيم المتغيرات كخصائص فيه data هنا قمنا بإنشاء كائن إسمه
            const data = {
                firstName: firstNameValue,
                lastName: lastNameValue
            }

// jsonData و تخزينها في المتغير data هنا قمنا بإنشاء نسخة نصيّة من الكائن
            const jsonData = JSON.stringify(data);

// في ذاكرة المتصفح المحلية jsonData هنا قمنا بإضافة نسخة البيانات الموجودة في المتغير
            localStorage.setItem('data', jsonData);

// هنا قمنا بإظهار رسالة تنبيه تخبر المستخدم أنه تم حفظ الكائن في ذاكرة المتصفح المحلية
            alert('Data are stored in local storage as a json string.');
        }
    </script>
</body>
</html>