جافا سكريبت و`تخزين الويب`
تشرح هذه المقالة جافا سكريبت وتخزين الويب۔
تخزين الويب هو آلية قوية وبسيطة لتخزين البيانات في المتصفح، ويتكون بشكل رئيسي من نوعين: 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 & 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>جافا سكريبت وتخزين الويب
ما هو تخزين الويب؟
تخزين الويب هو واجهة برمجة تطبيقات لحفظ البيانات على جانب العميل (متصفح المستخدم)۔ على عكس الكوكيز، لا يتم إرسال تخزين الويب مع طلبات HTTP وله سعة تخزين أكبر، مما يجعل إدارة البيانات أكثر كفاءة۔
تخزين الويب يوفر نوعين من مناطق التخزين يمكن استخدامها حسب الغرض۔
-
localStoragelocalStorageهو مساحة تخزين دائمة۔ يتم الاحتفاظ بالبيانات حتى بعد إغلاق المتصفح أو إعادة تشغيل الكمبيوتر۔ وهو مناسب لتخزين بيانات طويلة الأمد مثل إعدادات المستخدم أو حالة تسجيل الدخول۔ -
sessionStoragesessionStorageهو مساحة تخزين مؤقتة۔ يكون فعالاً فقط ضمن نفس التبويب، وتبقى البيانات بعد إعادة تحميل الصفحة، لكن يتم حذفها تلقائيًا عند إغلاق التبويب أو النافذة۔ وهو مناسب للحفاظ على الحالات المؤقتة بين الصفحات۔
كلاهما يخزن البيانات كأزواج مفتاح-قيمة (نصوص)۔
الاستخدام الأساسي
تخزين البيانات
يمكن تخزين البيانات كما يلي:۔
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()يحذف جميع البيانات المخزنة۔
حفظ واسترجاع الكائنات
تخزين الويب لا يمكنه إلا تخزين النصوص۔ لذلك، عند حفظ الكائنات يجب تحويلها إلى نص باستخدام 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من تبويب أو نافذة أخرى۔
مثال عملي: حفظ حالة الوضع الداكن
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();- في هذا المثال، كل ضغطة زر تقوم بتبديل الوضع الداكن ON/OFF مع حفظ الحالة في
localStorageواسترجاعها عند الزيارة التالية۔
حدود التخزين والاعتبارات
عند استخدام تخزين الويب، يجب أخذ النقاط التالية في الاعتبار:۔
-
حد التخزين يختلف ذلك حسب المتصفح والبيئة، لكنه عادة حوالي 5 ميغابايت۔
-
الأمان بما أنه متاح مباشرة من جافا سكريبت، فهو غير مناسب لتخزين المعلومات الحساسة۔
-
تحويل البيانات النصية جميع البيانات تخزن تلقائيًا كنصوص، لذا لا يتم الاحتفاظ بمعلومات النوع (نوع البيانات)۔
1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）
الملخص
تخزين الويب هو ميزة مفيدة جدًا لتخزين البيانات مؤقتًا أو دائمًا على جانب العميل في تطبيقات الويب۔ من المهم فهم الفروق بين localStorage وsessionStorage، وطريقة استخدامهما، وكذلك معرفة كيفية استخدام JSON.stringify وJSON.parse لحفظ واسترجاع البيانات۔ عند استخدامه بشكل صحيح، يمكن أن يعزز تجربة المستخدم بشكل كبير۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔