البرمجة

تخزين الفئة بواسطة JavaScript

بالتأكيد، يمكنك استخدام ميزة تخزين البيانات المحلية في JavaScript مثل localStorage أو sessionStorage لتخزين قيمة الفئة المضافة إلى العنصر بحيث يمكن استرجاعها عند إعادة تحميل الصفحة.

مقالات ذات صلة

لنقم بتعديل الكود لتحقيق هذا الغرض:

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Storage Class for Reloading Pagetitle>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>

<p>هل يمكن إضافة فئة إلى عنصر وتخزينه في العنصر إذا تمت إعادة تحميل الصفحة؟p>

<button>إضافة فئةbutton>
<div class="">div>

<script>
$(document).ready(function () {
    // التحقق من وجود قيمة مخزنة في التخزين المحلي عند تحميل الصفحة
    var storedClass = localStorage.getItem('storedClass');
    if (storedClass) {
        // إذا كانت هناك قيمة مخزنة، قم بإضافتها كفئة للعنصر المناسب
        $("div").addClass(storedClass);
    }

    // إضافة الفئة عند النقر على الزر
    $("button").click(function() {
        $("div").addClass("test");

        // تخزين الفئة المضافة في التخزين المحلي
        localStorage.setItem('storedClass', 'test');
    });
});
script>

body>
html>

بهذا التعديل، عند تحميل الصفحة، سيتم التحقق من وجود قيمة مخزنة في التخزين المحلي. إذا وجدت القيمة، سيتم إضافتها كفئة للعنصر المناسب، وبالتالي ستظهر التغييرات المطلوبة على الصفحة. عند النقر على الزر، ستتم إضافة الفئة المطلوبة إلى العنصر وسيتم تخزينها في التخزين المحلي لتكون متاحة عند إعادة تحميل الصفحة.

المزيد من المعلومات

بالطبع، دعنا نستكشف هذا الموضوع بعمق أكبر.

في هذا الشرح، سنقوم بفهم كيفية استخدام ميزة تخزين البيانات المحلية في JavaScript لتخزين قيمة الفئة المضافة إلى العنصر واسترجاعها عند إعادة تحميل الصفحة.

أولاً، دعنا نلقي نظرة على الكود الذي قمت بتقديمه:

html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Storage Class for Reloading Pagetitle>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>

<p>هل يمكن إضافة فئة إلى عنصر وتخزينه في العنصر إذا تمت إعادة تحميل الصفحة؟p>

<button>إضافة فئةbutton>
<div class="">div>

<script>
$(document).ready(function () {
    // التحقق من وجود قيمة مخزنة في التخزين المحلي عند تحميل الصفحة
    var storedClass = localStorage.getItem('storedClass');
    if (storedClass) {
        // إذا كانت هناك قيمة مخزنة، قم بإضافتها كفئة للعنصر المناسب
        $("div").addClass(storedClass);
    }

    // إضافة الفئة عند النقر على الزر
    $("button").click(function() {
        $("div").addClass("test");

        // تخزين الفئة المضافة في التخزين المحلي
        localStorage.setItem('storedClass', 'test');
    });
});
script>

body>
html>

في هذا الكود، نستخدم jQuery لتسهيل تحديد العناصر وتطبيق التغييرات عليها. عندما يتم تحميل الصفحة، يتم فحص ما إذا كان هناك قيمة مخزنة في localStorage تحت المفتاح ‘storedClass’. إذا وجدت، يتم إضافة هذه القيمة كفئة للعنصر div المناسب. وعند النقر على الزر، يتم إضافة الفئة ‘test’ إلى العنصر div وتخزينها في localStorage تحت المفتاح ‘storedClass’.

الميزة الجميلة في استخدام تخزين البيانات المحلية في JavaScript هي أن البيانات المخزنة ستظل متاحة حتى بعد إعادة تحميل الصفحة أو إغلاق المتصفح وفتحه مرة أخرى. هذا يجعلها مفيدة لتخزين معلومات المستخدم المؤقتة مثل تفضيلات العرض أو حالة الجلسة.

للتأكد من عملية التخزين والاسترجاع بشكل صحيح، يمكنك فتح Developer Tools في المتصفح والانتقال إلى قسم Application أو Storage. هناك يمكنك رؤية البيانات التي تم تخزينها في localStorage وsessionStorage.

بهذا، يمكننا استخدام تخزين البيانات المحلية في JavaScript لحفظ حالة الصفحة بشكل فعال، مما يسمح للمستخدمين بتجربة تجربة أكثر انسجامًا وسلاسة دون فقدان البيانات عند إعادة تحميل الصفحة.

الوسوم
زر الذهاب إلى الأعلى