JavaScript at Cookies

Articles

Ipinaliwanag ng artikulong ito ang JavaScript at cookies.

Maingat naming ipapaliwanag ang lahat nang sunod-sunod, mula sa mga pangunahing kaalaman tungkol sa cookies, pagbabasa at pagsusulat, seguridad, hanggang sa mga praktikal na halimbawa.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript at Cookies

Ang Cookie ay tumutukoy sa maliliit na bahagi ng data na nakaimbak sa browser ng gumagamit. Pangunahing ginagamit ang mga ito para sa mga sumusunod na layunin:.

User authentication (pagpapanatili ng estado ng pag-login)
Pagsasa-save ng mga setting ng user (wika, tema, at iba pa)
Pagsubaybay (kasaysayan ng pag-browse, atbp.)

Sa JavaScript, maaari kang magbasa at magsulat ng cookies gamit ang document.cookie.

Paglikha (pagsusulat) ng cookies

Ang cookies ay nililikha gamit ang sumusunod na syntax:.

1document.cookie = "username=JohnDoe";

Ang code na ito ay nagsa-save ng cookie na may pangalan na "username=JohnDoe" sa browser.

Paglikha ng cookies na may petsa ng pag-expire

Maaaring magkaroon ng petsa ng pag-expire ang cookies. Kung walang itinakdang petsa ng pag-expire, itinuturing ito bilang isang session cookie at nabubura kapag isinara ang browser.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

Ang katangiang expires ay nagtatalaga ng petsa ng pag-expire ng cookie sa format na UTC.
Ang katangiang path ay nagtatalaga ng landas kung saan ipapadala ang cookie. / ay nangangahulugang para sa buong site.
Kung itatakda mo ang SameSite=None, ang Cookie ay ipapadala kahit sa mga cross-site na kahilingan. Gayunpaman, sa kasong ito, kailangan mong palaging isama ang Secure na attribute.
Ang pagtatakda ng Secure ay nililimitahan ang Cookie sa HTTPS na komunikasyon lamang, kaya't mas ligtas ito.
Sa pamamagitan ng pagtukoy sa document.cookie, makukuha mo ang lahat ng Cookie na mayroon sa kasalukuyang pahina bilang isang string.
Gamit ang console.log, maaari mong suriin ang pagkakaiba ng aktuwal na mga halaga ng Cookie na itinakda sa browser at ang mga halagang maaaring makuha.

Pagkuha (pagbabasa) ng cookies

Maaari mong makuha lahat ng cookies bilang isang string gamit ang document.cookie.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

Ang ibinabalik na halaga ng document.cookie ay isang string kung saan lahat ng Cookie ay pinapagsama sa anyong 'key=value;'.
Mainam gamitin ang isang function para i-parse ang string na ito at kunin ang nais na halaga.

Function para kunin ang halaga ng isang cookie

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Hinahati ng function na ito ang mga key at value gamit ang split() at ibinabalik ang value kung ito ay tugma sa tinukoy na key.
Sa pamamagitan ng paggamit ng decodeURIComponent, maaari mong tama na makuha ang mga naka-encode na character.
Kung ang kaukulang key ay wala, magbabalik ito ng null.

Pagbubura ng cookies

Mabubura ang isang cookie sa pamamagitan ng pagtatakda ng petsa ng pag-expire nito sa nakaraan.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

Kung bibigyan mo ng walang laman na value ang username at i-set ang expiration date sa nakaraan, ito ay mabubura.
Kapag magbubura ng isang Cookie, dapat rin na tumugma ang path, SameSite, at Secure na mga attribute sa ginamit noong ito ay nilikha.
Sa halimbawang ito, ang username ay natanggal, at ang ibang Cookie gaya ng theme=dark ay nananatili.

Mga opsyon para sa cookie

Maaari kang magtakda ng iba't ibang opsyon upang kontrolin ang kilos ng cookie. Ang pangunahing mga opsyon ay ang mga sumusunod:.

Nagtatalaga ng petsa ng pag-expire ng cookie sa format na UTC. Kung hindi itinakda, ang cookie ay magiging isang session cookie at mabubura kapag isinara ang browser.

Nagtatalaga ng expiration ng cookie sa bilang ng segundo. Mas inuuna ito kaysa sa `expires`.

Tinutukoy ang path kung saan ipapadala ang cookie. Halimbawa, kung ang iyong itinakda ay `/admin`, ang cookie ay ipapadala lamang sa mga pahina sa ilalim ng path na iyon.

Tinutukoy ang domain kung saan magiging valid ang cookie. Kadalasan, ito ay itinatalaga sa kasalukuyang domain, pero maaari mo rin itong itakda para sa lahat ng subdomain, gaya ng `.example.com`.

Kapag itinakda ang katangiang ito, ang cookie ay ipapadala lamang sa pamamagitan ng HTTPS. Para sa mas mataas na seguridad, laging itakda ang katangiang ito para sa sensitibong impormasyon.

Kinokontrol kung ang cookies ay ipapadala sa mga cross-site na request. Maaari kang magtakda ng isa sa tatlong sumusunod na halaga:.

- `Strict`
    Ipinapadala lamang ang cookies para sa request mula sa parehong site.

- `Lax`
    Ipinapadala ang cookies para sa karaniwang navigation, ngunit may ilang limitasyon.

- `None`
    Maaaring ipadala ang cookies kahit sa mga cross-site na request. Gayunpaman, kailangan ding itakda ang `Secure` na katangian.

Halimbawa: Secure na cookie

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Kung ilalagay mo ang secure, ang Cookie ay ipapadala lamang gamit ang HTTPS na komunikasyon.
Kung itatakda mo ang SameSite=Strict, ang Cookie ay hindi ipapadala para sa cross-site na kahilingan, kaya epektibo itong panlaban sa CSRF.
Ang mga secure na attribute na tulad nito ay mahalaga para sa mahahalagang Cookie na ginagamit para sa authentication o session management.

Encoding at decoding

Dahil maaaring may special na karakter ang halaga ng cookie, mas ligtas gamitin ang encodeURIComponent.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

Sa paggamit ng encodeURIComponent, maaari kang ligtas na mag-imbak ng spaces, mga simbolo, at iba pa sa isang Cookie.
Kapag binabasa ito, gamitin ang decodeURIComponent upang maibalik ang orihinal na string.
Sa halimbawang ito, ginagamit ang max-age=604800 upang itakda ang expiration period sa 7 araw (604,800 segundo). Ito ay isang paraan ng pagtatakda ng expiration date, na kapareho ng expires. Ang max-age ay maaaring itakda sa mga segundo at madalas ay mas madaling gamitin.

Praktikal na halimbawa: Pagsasa-save at paglo-load ng tema

Ang sumusunod ay isang halimbawa ng pagsasa-save ng napiling tema ng user sa cookie at awtomatikong paglalapat nito sa susunod na pagbisita.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

Ang function na setTheme ay nagse-save ng napiling tema sa isang Cookie at agad na tinatawag ang applyTheme upang i-update ang screen.
Ang function na applyTheme ay nagpapalit ng background at kulay ng teksto ng body ayon sa tema.
Sa halimbawang ito, dahil naka-set ang max-age=604800, ang tema ay mananatili para sa isang linggo.
Dahil ang napili ng user ay maaaring manatili kapag bumalik siya sa pahina, mas gumaganda ang UX.

Mga limitasyon at pag-iingat sa cookies

Maging maingat sa mga sumusunod na punto kapag gumagamit ng cookies:.

Mga Limitasyon sa Laki Ang laki ng isang cookie ay limitado sa humigit-kumulang 4KB.
Limitasyon sa dami ng cookies na maaari mong i-save Depende sa browser, maaari kang mag-save ng mga 20 hanggang 50 kada domain.
Mga Paunang Alerto sa Seguridad Ang nilalaman ng mga Cookie ay karaniwang naka-save sa plain text, kaya hindi ito angkop sa pag-imbak ng kumpidensyal na impormasyon tulad ng mga password.
Cookies na hindi mababasa mula sa JavaScript Ang mga Cookie na may HttpOnly na attribute ay hindi mababasa mula sa JavaScript para sa seguridad.

Server at mga `Cookie`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Ang ilang mga attribute ng Cookie gaya ng HttpOnly ay hindi maaring itakda gamit ang JavaScript. Kailangang itakda ang mga ito sa server side.

Buod

Ang pag-manipula ng mga Cookie gamit ang JavaScript ay maaaring mapabuti ang karanasan ng user at mapanatili ang estado. Gayunpaman, tandaan ang mga sumusunod na punto upang ligtas at maayos ang paghawak nito.

Mag-imbak lamang ng pinakakaunting kinakailangang impormasyon Mula sa pananaw ng privacy at seguridad, iwasan ang pag-imbak ng personal o sensitibong impormasyon at itala lamang ang kinakailangang data.
Tamang-tama ang paglagay ng security attributes Ilagay ang mga attribute gaya ng Secure at SameSite upang maiwasan ang cross-site attacks tulad ng XSS at CSRF.
Pag-encode at Pag-decode ng Data Gamitin ang encodeURIComponent at decodeURIComponent upang ligtas na mag-imbak at magbasa ng Cookie values para ang mga espesyal na karakter at Japanese ay tama ang paghawak.

Sa pamamagitan ng pag-aaral ng tamang paggamit ng mga Cookie, makakapagbuo ka ng mas advanced at ligtas na mga web application.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Shared Worker sa JavaScript

JavaScript at Cookies

YouTube Video

JavaScript at Cookies

Paglikha (pagsusulat) ng cookies

Paglikha ng cookies na may petsa ng pag-expire

Pagkuha (pagbabasa) ng cookies

Function para kunin ang halaga ng isang cookie

Pagbubura ng cookies

Mga opsyon para sa cookie

Halimbawa: Secure na cookie

Encoding at decoding

Praktikal na halimbawa: Pagsasa-save at paglo-load ng tema

Mga limitasyon at pag-iingat sa cookies

Server at mga Cookie

Buod

YouTube Video

Server at mga `Cookie`