Cookies in Browser – কুকি কি ? JavaScript দিয়ে কুকি তৈরি করা

Cookies in Browser – কুকি কি ? 

কুকি সাধারণত ইউজারের তথ্য ওয়েব পেজে সংরক্ষণ করার সুযোগ দেয়।

আমরা যখন ব্রাউজারে কোনো ওয়েব পেজ হিট করি তখন ব্রাউজার থেকে সার্ভারে একটা রিকোয়েস্ট যাই, আর সার্ভার থেকে রেসপন্ড এর মাধ্যমে ওয়েব পেজ এর ডাটা গুলো পাথানো হয় যার ফলে আমরা ওয়েব পেজটি দেখতে পারি। এরপর সার্ভারে কানেকশন বন্ধ হয়ে যায়, যার জন্যে সার্ভার  উজারের সকল তথ্য ভুলে যায় এবং ব্রাউজারের সাথে সার্ভারের কোনো সম্পর্ক থাকে না।

আর এই সমস্যা এড়ানোর জন্য কুকি ব্যবহার করা হয়। যাতে করে সার্ভার বুঝতে পারে এই ইউজার এর আগেও এই ওয়েব পেজ এ হিট করেছে।

JavaScript দিয়ে কুকি বানানো

ধরুন আপনি একটি পপআপ মেসেজ আপনার ওয়েব পেজে দেখাতে চান কিন্তু মেসেজটি ইউজারকে প্রতি ২৪ ঘণ্টায় একবার দেখবেন। মনে ইউজার যদি প্রথমবার সাইটে গিয়ে পপআপ মেসেজটি দেখে, তাহলে পরবর্তী ২৪ ঘণ্টা সে এই মেসেজ এর দেখবে না।

এই কাজটিই করবো এখন আমরা কিন্তু JavaScript দিয়ে। JavaScript দিয়ে আমরা খুব সহজে কুকি create, delete, read করতে পারি এবং expiry date সেট করতে পারি, যে সময়ের মধ্যে by default কুকি  ভালু ডিলিট হয়ে যায়।

JavaScript এ document.cookie দিয়ে আপনি কুকি (cookies) ডিফাইন করতে পারবেন। যেমন:

document.cookie="popup=showOnce;

Expiry date সেট করতে হলে:

document.cookie="popup=showOnce; expires=Thu, 18 Dec 2013 12:00:00 UTC";

পপআপ এর জন্য আমরা bootstrap Modal ব্যবহার করতে পারি। যার উনিক id হল exampleModal , এখন আমরা বাকি কাজটা করব javaScript দিয়ে 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                This popup will show once a day
            </div>

        </div>
    </div>
</div>

আমরা প্রথমে document(‘#exampleModal’).modal(‘show’); দিয়ে আমাদের মডাল্টি ওপেন করবো। এরপর কুকি  সেট করবো document.cookie(‘popup’, ‘showOnce’, {expires: 1}); , এখানে 1 দারা একদিন বোঝানো হয়েছে। একানে popup ভারিয়াবল্টি showOnce মান স্টোর করে রাখবে। কিন্তু সেটা একদিনের জন্য। একদিন পর এই ভালু ডিলিট হয়ে যাবে। আমরা ইচ্ছা করলে একদিনের পরিবরতে যেকোনো টাইম নিরধারন করে দিতে পারি। তারপর আমরা একটি চেকার বসিয়েছি। যদি কুকিতে popup এর মান নাল থাকে তাহলেই popup দেখাবে আর না থাকলে দেখাবে না।

<script>
        // if there is no cookie
        if (document.cookie('popup') == null) {
            document('#exampleModal').modal('show');
            document.cookie('popup', 'showOnce', {expires: 1});
            // set cookie expiry  1 day
        } else { // have cookie
            // do something
        }
</script>

Send Mail With PHP Mailer


Reference 

1. W3Schools – JavaScript Cookies: W3Schools is a popular resource for web development tutorials. They have a dedicated section on JavaScript, providing examples and explanations. W3Schools – JavaScript

2. JavaScript.info – Cookies: JavaScript.info offers detailed and interactive tutorials on JavaScript concepts. Their guide on cookies covers how to work with cookies, including setting, getting, and deleting them. JavaScript.info

3. FreeCodeCamp – Cookies in JavaScript: FreeCodeCamp provides free coding tutorials and challenges. They have a tutorial on working with cookies in JavaScript that includes explanations and code examples. FreeCodeCamp – Cookies in JavaScript