Articles
Panimula sa JavaScript
JavaScript at `Web Storage`

JavaScript at `Web Storage`

Ipinaliwanag ng artikulong ito ang JavaScript at Web Storage.

Ang Web Storage ay isang makapangyarihan at simpleng mekanismo para mag-imbak ng data sa browser, na binubuo ng dalawang pangunahing uri: localStorage at sessionStorage. Ipapaliwanag namin ang kanilang mga pagkakaiba, paggamit, at mga praktikal na halimbawa ng code nang paisa-isa.

YouTube Video

javascript-web-storage-iframe.html 
  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5    <title>Web Storage Demo</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,
 45        .right-column {
 46            flex: 1 1 200px;
 47            min-width: 200px;
 48        }
 49
 50        h1,
 51        h2 {
 52            font-size: 1.2rem;
 53            color: #007bff;
 54            margin-top: 0.5em;
 55            margin-bottom: 0.5em;
 56            border-left: 5px solid #007bff;
 57            padding-left: 0.6em;
 58            background-color: #e9f2ff;
 59        }
 60
 61        button {
 62            display: block;
 63            margin: 1em auto;
 64            padding: 0.75em 1.5em;
 65            font-size: 1rem;
 66            background-color: #007bff;
 67            color: white;
 68            border: none;
 69            border-radius: 6px;
 70            cursor: pointer;
 71            transition: background-color 0.3s ease;
 72        }
 73
 74        button:hover {
 75            background-color: #0056b3;
 76        }
 77
 78        #output {
 79            margin-top: 1em;
 80            background-color: #1e1e1e;
 81            color: #0f0;
 82            padding: 1em;
 83            border-radius: 8px;
 84            min-height: 200px;
 85            font-family: Consolas, monospace;
 86            font-size: 0.95rem;
 87            overflow-y: auto;
 88            white-space: pre-wrap;
 89        }
 90
 91        .highlight {
 92            outline: 3px solid #ffc107;
 93            /* yellow border */
 94            background-color: #fff8e1;
 95            /* soft yellow background */
 96            transition: background-color 0.3s ease, outline 0.3s ease;
 97        }
 98
 99        .active {
100            background-color: #28a745;
101            /* green background */
102            color: #fff;
103            box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
104            transition: background-color 0.3s ease, box-shadow 0.3s ease;
105        }
106
107        body.dark {
108            background-color: black;
109            color: white;
110        }
111    </style>
112</head>
113
114<body>
115    <button onclick="testLocalStorage()">Test Local Storage</button>
116
117    <script>
118        function testLocalStorage() {
119            // Test operations
120            localStorage.setItem("username", "Alice");     // Save new value
121            localStorage.setItem("username", "Bob");       // Update value
122            localStorage.removeItem("username");           // Remove key
123            localStorage.setItem("theme", "dark");         // Add another key
124            localStorage.clear();                          // Clear all data
125        }
126    </script>
127</body>
128
129</html>
javascript-web-storage.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
102    body.dark {
103        background-color: black;
104        color: white;
105    }
106  </style>
107</head>
108<body>
109    <div class="container">
110        <h1>JavaScript Console</h1>
111        <button id="executeBtn">Execute</button>
112        <div id="output"></div>
113    </div>
114
115    <div class="container">
116        <h1>IFrame Sample</h1>
117        <iframe src="javascript-web-storage-iframe.html" style="width: 100%;"></iframe>
118    </div>
119
120    <script>
121        // Override console.log to display messages in the #output element
122        (function () {
123            // Override console.log
124            const originalLog = console.log;
125            console.log = function (...args) {
126                originalLog.apply(console, args);
127                const message = document.createElement('div');
128                message.textContent = args.map(String).join(' ');
129                output.appendChild(message);
130            };
131
132            // Override console.error
133            const originalError = console.error;
134            console.error = function (...args) {
135                originalError.apply(console, args);
136                const message = document.createElement('div');
137                message.textContent = args.map(String).join(' ');
138                message.style.color = 'red'; // Color error messages red
139                output.appendChild(message);
140            };
141        })();
142
143        document.getElementById('executeBtn').addEventListener('click', () => {
144            // Prevent multiple loads
145            if (document.getElementById('externalScript')) return;
146
147            const script = document.createElement('script');
148            script.src = 'javascript-web-storage.js';
149            script.id = 'externalScript';
150            //script.onload = () => console.log('javascript-web-storage.js loaded and executed.');
151            //script.onerror = () => console.log('Failed to load javascript-web-storage.js.');
152            document.body.appendChild(script);
153        });
154    </script>
155</body>
156</html>

JavaScript at Web Storage

Ano ang Web Storage?

Ang Web Storage ay isang API para mag-imbak ng data sa client side (browser ng gumagamit). Hindi tulad ng Cookies, ang Web Storage ay hindi ipinapadala kasama ng HTTP requests at mas malaki ang kapasidad ng imbakan, kaya't mas epektibo para sa pamamahala ng data.

Nagbibigay ang Web Storage ng dalawang uri ng storage area, na maaaring gamitin ayon sa layunin.

  • localStorage Ang localStorage ay isang permanenteng storage area. Nanatili ang data kahit isara ang browser o i-restart ang PC. Ito ay angkop para sa pag-iimbak ng pangmatagalang data tulad ng mga setting ng user o estado ng pag-login.

  • sessionStorage Ang sessionStorage ay isang pansamantalang storage area. Ito ay epektibo lamang sa parehong tab, at habang nananatili ang data kahit i-reload ang page, awtomatikong nabubura ito kapag isinara ang tab o window. Ito ay angkop para sa pagpapanatili ng pansamantalang estado sa pagitan ng mga pahina.

Pareho silang nag-iimbak ng data bilang key-value pairs (strings).

Pangunahing Paggamit

Pag-iimbak ng Data

Maaaring iimbak ang data tulad ng sumusunod:.

1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");
  • Gamitin ang setItem na metodo upang mag-imbak ng key-value pairs sa localStorage o sessionStorage.

Pagkuha ng Data

Maaaring kunin ang data tulad ng sumusunod:.

1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"
  • Gamitin ang getItem() upang mabasa ang naimbak na halaga.

Pagbubura ng Data

Maaaring burahin ang data tulad ng sumusunod:.

1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();
  • Gamitin ang removeItem() o clear() upang burahin ang naimbak na datos.
    • Ang removeItem() ay nagbubura lamang ng datos na tumutugma sa tinukoy na key.
    • Ang clear() ay nagbubura ng lahat ng naimbak na datos.

Pag-save at Pag-restore ng Mga Object

Ang Web Storage ay maaari lamang mag-imbak ng strings. Kaya kapag magsa-save ka ng objects, kailangan mong i-convert ito sa string gamit ang JSON.stringify() at i-restore gamit ang JSON.parse() kapag babasahin na.

 1const user = {
 2    name: "JohnDoe",
 3    age: 30
 4};
 5
 6// Save (serialize)
 7localStorage.setItem("user", JSON.stringify(user));
 8
 9// Retrieve (deserialize)
10const savedUser = JSON.parse(localStorage.getItem("user"));
11console.log(savedUser.name); // "JohnDoe"
  • Iconvert muna ang object sa string gamit ang JSON.stringify() bago i-save, at ibalik ito gamit ang JSON.parse().

Demo ng Pagkakaiba ng localStorage at sessionStorage 

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <title>Web Storage Demo</title>
 5    </head>
 6    <body>
 7        <input id="input" placeholder="Type your name..." />
 8        <button onclick="saveToLocal()">Save to localStorage</button>
 9        <button onclick="saveToSession()">Save to sessionStorage</button>
10        <button onclick="showValues()">Show Stored Values</button>
11
12        <script>
13            function saveToLocal() {
14                const value = document.getElementById("input").value;
15                localStorage.setItem("name", value);
16                alert("Saved to localStorage");
17            }
18
19            function saveToSession() {
20                const value = document.getElementById("input").value;
21                sessionStorage.setItem("name", value);
22                alert("Saved to sessionStorage");
23            }
24
25            function showValues() {
26                const local = localStorage.getItem("name");
27                const session = sessionStorage.getItem("name");
28
29                alert(`localStorage: ${local}\nsessionStorage: ${session}`);
30            }
31        </script>
32    </body>
33</html>
 1function saveToLocal() {
 2    const value = document.getElementById("input").value;
 3    localStorage.setItem("name", value);
 4    alert("Saved to localStorage");
 5}
 6
 7function saveToSession() {
 8    const value = document.getElementById("input").value;
 9    sessionStorage.setItem("name", value);
10    alert("Saved to sessionStorage");
11}
12
13function showValues() {
14    const local = localStorage.getItem("name");
15    const session = sessionStorage.getItem("name");
16
17    alert(`localStorage: ${local}\nsessionStorage: ${session}`);
18}
  • Ang code na ito ay isang simpleng demo na nag-iimbak ng ipinasok na pangalan sa alinman sa localStorage o sessionStorage at nagbibigay-daan sa iyong tingnan ang kanilang mga halaga.

Pagsubaybay sa Mga Storage Event

Kapag ina-access ang parehong localStorage sa iba't ibang tab, maaari mong subaybayan ang storage event sa isang tab kapag may nagbago sa data mula sa ibang tab.

1window.addEventListener("storage", function(event) {
2    console.log("Storage changed!");
3    console.log(`Key: ${event.key}`);
4    console.log(`Old Value: ${event.oldValue}`);
5    console.log(`New Value: ${event.newValue}`);
6});
  • Ang event na ito ay para lamang sa localStorage at hindi nangyayari sa sessionStorage.
1// Test operations
2localStorage.setItem("username", "Alice");     // Save new value
3localStorage.setItem("username", "Bob");       // Update value
4localStorage.removeItem("username");           // Remove key
5localStorage.setItem("theme", "dark");         // Add another key
6localStorage.clear();                          // Clear all data
  • Ang storage event ay hindi nangyayari sa parehong tab, kaya maaari mo lamang itong makita kapag na-modify ang localStorage mula sa ibang tab o window.

Praktikal na Halimbawa: Pag-save ng Estado ng Dark Mode 

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <style>
 5        body.dark {
 6            background-color: black;
 7            color: white;
 8        }
 9    </style>
10</head>
11<body>
12    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
13
14    <script>
15        // Load the initial state
16        if (localStorage.getItem("darkMode") === "true") {
17            document.body.classList.add("dark");
18        }
19
20        function toggleDarkMode() {
21            const isDark = document.body.classList.toggle("dark");
22            localStorage.setItem("darkMode", isDark);
23        }
24    </script>
25</body>
26</html>
 1// Load the initial state
 2if (localStorage.getItem("darkMode") === "true") {
 3    document.body.classList.add("dark");
 4}
 5
 6function toggleDarkMode() {
 7    const isDark = document.body.classList.toggle("dark");
 8    localStorage.setItem("darkMode", isDark);
 9}
10
11toggleDarkMode();
  • Sa halimbawang ito, bawat pindot ng button ay nagpapalit ng dark mode ON/OFF, na ang estado ay nasasave sa localStorage at naibabalik sa susunod na pagbisita.

Limitasyon sa Imbakan at Mga Dapat Isaalang-alang

Kapag gumagamit ng Web Storage, dapat isaalang-alang ang mga sumusunod:.

  • Limitasyon ng Imbakan Nagkakaiba-iba ito depende sa browser at kapaligiran, ngunit karaniwan ay nasa paligid ng 5MB.

  • Seguridad Dahil direktang naa-access mula sa JavaScript, ito ay hindi angkop para sa pag-iimbak ng sensitibong impormasyon.

  • Pagko-convert ng Data sa String Ang lahat ng data ay awtomatikong naiimbak bilang string, kaya't ang type information ay hindi napapanatili.

1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）

Buod

Ang Web Storage ay isang napaka-kapaki-pakinabang na tampok para sa panandalian o permanenteng pag-iimbak ng data sa client side sa mga web application. Mahalagang maintindihan ang mga pagkakaiba at paggamit ng localStorage at sessionStorage, at alamin kung paano gamitin ang JSON.stringify at JSON.parse para mag-save at mag-restore ng data. Kapag ginamit nang tama, maaari nitong lubos na pagandahin ang karanasan ng gumagamit.

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

JavaScript at CookiesJavaScript at IndexedDB