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

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Read Cookie Value</h1>
    <button onclick="printCookieValue()">Print cookie value</button>
    <p id="result"></p>
    
    <script>
        // هنا قمنا بإنشاء الكوكي التي سيتم عرض قيمتها لاحقاً عند النقر على الزر
        document.cookie = 'username=' + encodeURIComponent('Mhamad Harmush');
        
        // name فيها باراميتر واحد إسمه getCookieValue هنا قمنا بتعريف دالة إسمها
        function getCookieValue(name) {
            // هنا قمنا بتجزيء النص الذي فيه جميع الكوكيز إلى مصفوفة على أساس الفاصلة المنقوطة
            let cookieArr = document.cookie.split(";");
    
            // هنا مررنا على جميع عناصر المصفوفة
            for(let i = 0; i < cookieArr.length; i++) {
                // هنا قمنا بتقسيم كل إسم و قيمة في عناصر هذه المصفوفة على أساس رمز المساوات
                let cookiePair = cookieArr[i].split("=");
    
                // هنا قمنا بإزالة أي مسافة فارغة موجودة على أطراف نص العنصر
                // ثم قمنا بمقارنتها مع العنصر نفسه حتى نرجعها و نخرج من الدالة
                // إذا كانت متطابقة مع قيمة العنصر لأن ذلك سيعني أننا وجدناها
                if(name == cookiePair[0].trim()) {
                    // هنا قمنا بفك ترميز القيمة التي سيتم إرجاعها لإعادة كما كانت
                    return decodeURIComponent(cookiePair[1]);
                }
            }
    
            // إن لم يتم إيجاد إسم القيمة في المتصفح null هنا سيتم إرجاع القيمة
            return null;
        }
        
        // printCookieValue هنا قمنا بتعريف دالة إسمها
        function printCookieValue() {
            // لها 'username' مع تمرير القيمة getCookieValue() هنا سيتم إستدعاء الدالة
            // cookieValue القيمة التي سترجعها سيتم تخزينها في المتغير 
            let cookieValue = getCookieValue('username');
            
            // فهذا يعني أنه لم يتم العثور على null تساوي cookieValue إذا كانت قيمة 
            // result يساوي id الكوكي لذا سيتم عرض النص التالي في العنصر الذي يملك 
            if (cookieValue == null) {
                document.querySelector('#result').innerHTML = 'Cookie not found!';
            }
            // result يساوي id إذا لم تكن قيمته كذلك سيتم عرض قيمة الكوكي في العنصر الذي يملك
            else {
                document.querySelector('#result').innerHTML = 'username = ' + cookieValue;
            }
        }
    </script>
</body>
</html>