الفرق بين getItem & setItem

Zen Eddin Allaham · 16 يونيو

ما الفرق بين setitem & getitem في تخزين المحلي مع تطبيق كود مثال من فضلكم

Mustafa Suleiman · 16 يونيو

شكل البيانات في التخزين المحلي يكون كالتالي:

{"language":"python","recentProjects":[{"id":"174604085757497282027352","title":"Untitled Project","description":""}]}

لاحظ عبارة عن كائن JSON ولكن البيانات في ذلك الكائن في شكل سلسلة نصية " "

وsetitem هي لتخزين البيانات في التخزين المحلي للمتصفح، حيث تستقبل معاملين الأول اسم المفتاح key الذي نريده لتعيين مفتاح للوصول لتلك البيانات من أجل استردادها أي هي الـ value التي في الصورة، والمعامل الثاني هو البيانات نفسها لكن في شكل سلسلة نصية وذلك يتم من خلال JSON.stringify.

ثم نستخدم دالة أو ميثود getItem من أجل استرداد تلك البيانات عن طريق اسم المفتاح الذي حددناه، ثم نقوم بتحويلها من شكل سلسلة نصية إلى كائن جافاسكريبت تفهمه اللغة عن طريق JSON.parse لكي نصل للخواص التي به والتي تحمل القيم.

قم بتجربة التالي لتفهم ما أقصد:

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage</title>
</head>
<body>
    <h1>Local Storage Example</h1>
    <button onclick="saveData()">Save Data</button>
    <button onclick="getData()">Get Data</button>
    <p id="output"></p>

    <script>
        function saveData() {
            localStorage.setItem('username', 'Ali');

            const user = {
                name: 'Ali',
                age: 25,
                city: 'Cairo'
            };
            localStorage.setItem('userDetails', JSON.stringify(user));

            document.getElementById('output').innerText = 'Data saved successfully!';
        }

        function getData() {
            const username = localStorage.getItem('username');

            const userDetails = JSON.parse(localStorage.getItem('userDetails'));

            let output = `Username: ${username}\n`;
            if (userDetails) {
                output += `Name: ${userDetails.name}, Age: ${userDetails.age}, City: ${userDetails.city}`;
            } else {
                output += 'No user details found!';
            }

            document.getElementById('output').innerText = output;
        }
    </script>
</body>
</html>

محمد_عاطف · 19 يونيو

في التخزين المحلي (Local Storage) الدالتين setItem و getItem هما جزء من كائن localStorage ويستخدمان لحفظ البيانات واسترجاعها.

فإن setItem تستخدم لحفظ القيمة التي تريدها في التخزين المحلي باستخدام مفتاح (key).

وgetItem تستخدم لإسترجاع القيمة المحفوظة مسبقا في الدالة setItem باستخدام نفس المفتاح.

فمثلا تخيل أننا نريد إنشاء موقع باللغتين العربية والإنجليزية فكيف نستطيع معرفة اللغة التي إختارها المستخدم الحالي ؟ وحتى لو قام بإغلاق المتصفح والدخول للموقع مرة أخرى نريد معرفة أخر لغة هو قام بإختيارها .

هنا نستخدم التخزين المحلي لتحقيق ذلك.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>تبديل اللغة</title>
</head>
<body>

  <h1 id="title"></h1>
  <p id="message"></p>
  <button onclick="toggleLanguage()">تبديل اللغة</button>

  <script>
    // النصوص باللغتين
    const translations = {
      en: {
        title: "Welcome",
        message: "English Text"
      },
      ar: {
        title: "مرحا",
        message: "نص باللغة العربية"
      }
    };

    // دالة لتغيير النصوص حسب اللغة المختارة
    function applyLanguage(lang) {
      document.getElementById('title').textContent = translations[lang].title;
      document.getElementById('message').textContent = translations[lang].message;
    }

    // دالة لتبديل اللغة
    function toggleLanguage() {
      let currentLang = localStorage.getItem('language') || 'en';
      let newLang = currentLang === 'en' ? 'ar' : 'en';
      localStorage.setItem('language', newLang);
      applyLanguage(newLang);
    }

    // عند تحميل الصفحة، استخدم اللغة المخزنة أو الإنجليزية كافتراضي
    window.onload = () => {
      const savedLang = localStorage.getItem('language') || 'en';
      applyLanguage(savedLang);
    };
  </script>

</body>
</html>

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

الفرق بين getItem & setItem

السؤال

Zen Eddin Allaham

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية