Thiết lập đơn giản một cookie message cho website.

 Từ khi hội đồng châu Âu khuyến caó các nhà cung cấp dịch vụ website phải thể hiển cảnh báo đối với cookie người dùng được lưu. 

 Vậy cookie là gì ? Mình search ra 2 kết qủa như sau :

Cookies là các tệp được trang web người dùng truy cập tạo ra. Cookie giúp trải nghiệm trực tuyến của bạn dễ dàng hơn bằng cách lưu thông tin duyệt web. Với Cookies, các trang web có thể duy trì trạng thái đăng nhập của bạn, ghi nhớ tùy chọn trang web và cung cấp nội dung phù hợp với vị trí của người dùng.

Cookie là một đoạn văn bản mà một Web server có thể lưu trên ổ cứng của người dùng. Cookie cho phép một website lưu các thông tin trên máy tính của người dùng và sau đó lấy lại nó. Các mẩu thông tin sẽ được lưu dưới dạng cặp tên – giá trị (name-value).

Ok, giờ bạn hiểu cookie là gì rồi đúng không ? 

Vậy thiết lập nó như thế nào khi bạn tạo một website đơn giản như website bán hàng, website tin tức, website giới thiệu về công ty, vân vân, .... 

Để thiết lập một cookie message có rất nhiều cách, một cách đơn giản nhất là tận dụng CSS trên bootstrap , tận dụng javascript có sẵn hoặc bạn download lưu về server rồi include vào code của bạn. 

Javascript bạn có thể add đoạn code này vào: 

<script>

/*

 * Bootstrap Cookie Alert by Wruczek

 * https://github.com/Wruczek/Bootstrap-Cookie-Alert

 * Released under MIT license

 */

(function () {

    "use strict";

    var cookieAlert = document.querySelector(".cookiealert");

    var acceptCookies = document.querySelector(".acceptcookies");

    if (!cookieAlert) {

       return;

    }

    cookieAlert.offsetHeight; // Force browser to trigger reflow (https://stackoverflow.com/a/39451131)

    // Show the alert if we cant find the "acceptCookies" cookie

    if (!getCookie("acceptCookies")) {

        cookieAlert.classList.add("show");

    }

    // When clicking on the agree button, create a 1 year

    // cookie to remember user's choice and close the banner

    acceptCookies.addEventListener("click", function () {

        setCookie("acceptCookies", true, 365);

        cookieAlert.classList.remove("show");

        // dispatch the accept event

        window.dispatchEvent(new Event("cookieAlertAccept"))

    });

    // Cookie functions from w3schools

    function setCookie(cname, cvalue, exdays) {

        var d = new Date();

        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

        var expires = "expires=" + d.toUTCString();

        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

    }

    function getCookie(cname) {

        var name = cname + "=";

        var decodedCookie = decodeURIComponent(document.cookie);

        var ca = decodedCookie.split(';');

        for (var i = 0; i < ca.length; i++) {

            var c = ca[i];

            while (c.charAt(0) === ' ') {

                c = c.substring(1);

            }

            if (c.indexOf(name) === 0) {

                return c.substring(name.length, c.length);

            }

        }

        return "";

    }

})();

</script>

Về phần CSS thì bạn include 2 file css trên bootstrap này vào: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">

    <!-- cookiealert styles -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wruczek/Bootstrap-Cookie-Alert@gh-pages/cookiealert.css">

  Phần chinh xuất hiện message cho cookie của bạn là: 

<div class="alert text-center cookiealert" role="alert">

    <b>Do you like cookies?</b> &#x1F36A; We use cookies to ensure you get the best experience on our website. <a href="https://cookiesandyou.com/" target="_blank">Learn more</a>

    <button type="button" class="btn btn-primary btn-sm acceptcookies">

        I agree

    </button>

</div>

Ok, vậy bạn đã thiết lập xong một thông điệp lưu cookie của người dùng rồi. Đa số các website hiện tại đều xuất hiện thông điệp này. 

Ví dụ : trang này mình mới làm : https://911finder.co/

thì thông điệp xuất hiện như hình sau :