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

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box; 
        }
        
        body {
            padding: 20px;
            font-family: arial;
        }
        
        .box {
            background: beige;
            padding: 15px;
            margin: 20px 0;
        }
        
        .box h3 {
            margin-bottom: 10px;
        }
        
        .box input, .box button {
            display: block;
            margin-top: 10px;
            height: 30px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>JavaScript Local Storage</h1>
    
    <div class="box">
        <h3>Add New Item</h3>
        <input id="newItemName" placeholder="Item name"/>
        <input id="newItemValue" placeholder="Item value"/>
        <button onclick="addItem()">Add Item</button>
    </div>
    
    <div class="box">
        <h3>Get Item Value</h3>
        <input id="itemNameToGet" placeholder="Item name"/>
        <button onclick="showItem()">Get Value</button>
    </div>
    
    <div class="box">
        <h3>Remove Item</h3>
        <input id="itemNameToRemove" placeholder="Item name"/>
        <button onclick="removeItem()">Remove Item</button>
    </div>
    
    <script>
        // هذه الدالة تستخدم لإضافة أو تحديث عنصر في الذاكرة المحلية
        function addItem() {
            // هنا قمنا بتخزين إسم و قيمة العنصر المراد إضافته في الذاكرة المحلية
            let itemName = document.querySelector('#newItemName').value;
            let itemValue = document.querySelector('#newItemValue').value;
            // هنا قمنا بإضافة العنصر و قيمته في الذاكرة المحلية
            localStorage.setItem(itemName, itemValue);
            // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أن الإضافة تمت
            alert("Item is added to local storage.");
        }
        
        // هذه الدالة تستخدم لرؤية قيمة عنصر موجود في الذاكرة المحلية
        function showItem() {
            // هنا قمنا بتخزين إسم العنصر المراد الحصول على قيمته من الذاكرة المحلية
            let itemName = document.querySelector('#itemNameToGet').value;
            // هنا قمنا بإظهار نافذة منبثقة و عرض قيمة العنصر فيها
            alert('Item Value = ' + localStorage.getItem(itemName));
        }
        
        // هذه الدالة تستخدم للحصول على قيمة عنصر موجود في الذاكرة المحلية
        function removeItem() {
            // هنا قمنا بتخزين إسم العنصر المراد حذفه من الذاكرة المحلية
            let itemName = document.querySelector('#itemNameToRemove').value;
            // هنا قمنا بحذف العنصر - من خلال إسمه - من الذاكرة المحلية
            localStorage.removeItem(itemName);
            // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أنه تم الحذف
            alert("Item is removed from local storage.");
        }
    </script>
</body>
</html>