JavaScript ו־`Web Storage`

Articles

מאמר זה מסביר על JavaScript ו־Web Storage.

Web Storage הוא מנגנון חזק ופשוט לאחסון נתונים בדפדפן, המורכב בעיקר משני סוגים: localStorage ו־sessionStorage. נסביר את ההבדלים ביניהם, השימושים שלהם ודוגמאות קוד מעשיות שלב אחר שלב.

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 ו־`Web Storage`

מה זה `Web Storage`?

Web Storage הוא API לאחסון נתונים בצד הלקוח (בדפדפן של המשתמש). בניגוד ל־Cookies, נתוני Web Storage לא נשלחים עם בקשות HTTP ויש להם נפח אחסון גדול יותר, מה שהופך את ניהול הנתונים ליעיל יותר.

Web Storage מספק שני סוגי אזורי אחסון, שניתן להשתמש בהם לפי הצורך.

localStorage localStorage הוא אזור אחסון קבוע. הנתונים נשמרים גם אחרי סגירת הדפדפן או הפעלת המחשב מחדש. הוא מתאים לאחסון נתונים לטווח ארוך כגון הגדרות משתמש או מצב התחברות.
sessionStorage sessionStorage הוא אזור אחסון זמני. הוא תקף רק בתוך אותו לשונית, והנתונים נשמרים גם לאחר רענון הדף, אך נמחקים אוטומטית כאשר הלשונית או החלון נסגרים. הוא מתאים לשמירה על מצבים זמניים בין דפים.

שניהם מאחסנים נתונים כזוגות מפתח־ערך (מחרוזות).

שימוש בסיסי

אחסון נתונים

ניתן לאחסן נתונים כך:.

1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");

השתמשו בשיטה setItem כדי לאחסן זוגות מפתח-ערך ב-localStorage או sessionStorage.

שליפת נתונים

ניתן לשלוף נתונים כך:.

1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"

השתמשו ב-getItem() כדי לקרוא את הערך השמור.

מחיקת נתונים

ניתן למחוק נתונים כך:.

1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();

השתמשו ב-removeItem() או ב-clear() כדי למחוק את הנתונים השמורים.
- removeItem() מוחק רק את הנתון המתאים למפתח שצוין.
- clear() מוחק את כל הנתונים השמורים.

שמירה ושחזור של אובייקטים

Web Storage יכול לאחסן מחרוזות בלבד. לכן, כאשר שומרים אובייקטים, יש להמיר אותם למחרוזות באמצעות JSON.stringify() ולשחזר אותם עם JSON.parse() בעת הקריאה.

 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"

המירו אובייקט למחרוזת בעזרת JSON.stringify() לפני שמירה, ושחזרו אותו עם JSON.parse().

הדגמה של ההבדלים בין localStorage ל־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}

הקוד הזה הוא הדגמה פשוטה המאחסנת את השם שהוזן ב־localStorage או ב־sessionStorage ומאפשר לבדוק את הערכים שלהם.

מעקב אחרי אירועים באחסון

כאשר ניגשים לאותו localStorage בלשוניות שונות, ניתן לעקוב אחר אירוע storage בלשונית אחת כאשר הנתונים משתנים בלשונית אחרת.

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});

האירוע הזה מתרחש רק ב־localStorage ולא ב־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

האירוע storage לא מופעל באותו לשונית, ולכן אפשר להבחין בו כאשר localStorage משתנה מלשונית או חלון אחר.

דוגמה מעשית: שמירת מצב מצב כהה (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();

בדוגמה זו, כל לחיצה על כפתור מחליפה בין מצב כהה/רגיל, כאשר המצב נשמר ב־localStorage ומשוחזר בביקור הבא.

מגבלות אחסון ודגשים חשובים

בשימוש ב־Web Storage, כדאי לשים לב לנקודות הבאות:.

מגבלת אחסון המגבלה תלויה בדפדפן ובסביבה, אך לרוב היא סביב 5MB.
אבטחה מכיוון שניתן לגשת אליו ישירות דרך JavaScript, הוא לא מתאים לאחסון מידע רגיש.
המרת נתונים למחרוזות כל הנתונים נשמרים אוטומטית כמחרוזות, ולכן מידע על טיפוסי נתונים לא נשמר.

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

סיכום

Web Storage הוא תכונה מאוד שימושית ל־אחסון נתונים זמני או קבוע בצד הלקוח ביישומי ווב. חשוב להבין את ההבדלים והשימושים של localStorage ו־sessionStorage, וכן לדעת להשתמש ב־JSON.stringify ו־JSON.parse לשמירה ושחזור של נתונים. כאשר משתמשים בו נכון, זה יכול לשפר מאוד את חוויית המשתמש.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

JavaScript וקוקיז JavaScript ו-IndexedDB

JavaScript ו־`Web Storage`

YouTube Video

JavaScript ו־Web Storage

מה זה Web Storage?

שימוש בסיסי

אחסון נתונים

שליפת נתונים

מחיקת נתונים

שמירה ושחזור של אובייקטים

הדגמה של ההבדלים בין localStorage ל־sessionStorage

מעקב אחרי אירועים באחסון

דוגמה מעשית: שמירת מצב מצב כהה (Dark Mode)

מגבלות אחסון ודגשים חשובים

סיכום

YouTube Video

JavaScript ו־`Web Storage`

מה זה `Web Storage`?