انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 78
دورة جافا سكريبت

خاصية State مع كائن Window History في لغة جافا سكريبتJavaScript Window History State

سوف تتعلم في هذا الدرس ،على خاصية history state في لغة جافا سكريبت، وكيفة إضافة معلومات حول الصفحة الحالية داخل سجل المتصفح وإرجاعها وقت الحاجه.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
2
الأمثلة
1
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,491
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

What is the Window History object؟ ما هو كائن Window History في لغة جافا سكريبت؟

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


لماذا يتم استخدام كائن window history state في لغة جافا سكريبت؟

إنشاء تطبيقات صفحة واحدة (SPAs): باستخدام واجهة برمجة تطبيقات السجل history state ، يمكنك إنشاء SPA يمكنه تغيير المحتوى المعروض دون إعادة تحميل الصفحة بأكملها. يمكن أن يؤدي ذلك إلى تحسين تجربة المستخدم وجعل تطبيقك يبدو وكأنه تطبيق أصلي, حيث SPA هي إختصار إلي Single Page Applications.


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


إنشاء عناوين URL مخصصة: باستخدام طريقة pushState () ، يمكنك إنشاء عناوين URL مخصصة لتطبيقك يمكن مشاركتها ووضع إشارة مرجعية عليها بسهولة. يمكن أن يسهل هذا على المستخدمين التنقل في التطبيق الخاص بك والعودة إلى صفحات معينة.


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


تحسين الصفحات في محرّكات البحث: باستخدام طريقة pushState () لتغيير عنوان URL للصفحة دون تحديث الصفحة بأكملها ، يمكنك تحسين مُحسّنات محرّكات البحث لتطبيقك. يمكن أن يساعد ذلك محركات البحث في التنقل إلى صفحاتك وفهرستها بشكل أفضل.


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

ما هو كائن Window History في لغة جافا سكريبت؟

JavaScript Window History State Value قيمة كائن State في لغة جافا سكريبت

قيمة خاصية أو كائن state هي قيمة تساوي null حتي إضافة قيم بداخلها أو بيانات عن طريق دالة ()pushState أو دالة ()replaceState.

يمكن حفظ بيانات مرتبطة بالصفحة الحالية أو حالة التطبيق الحالية وإرجاعها عند الحاجة بداخل قيمة خاصية أو كائن state.

JavaScript Window History State Value

تستخدم history.state في لغة جافا سكريبت لحفظ معلومات حول الصفحة الحالية للتطبيق وإرجاعها وقت الحاجة.

HTML 
<html>
<head>
</head>
<body>
<h1>JavaScript Window History State Value</h1>
<p id="data">State Value :</p>
<input type="button" value="Get Value" id="myVal">

<script>
let myVal = document.getElementById("myVal");
let data = document.getElementById('data');
myVal.addEventListener('click',()=>{
  data.innerText += history.state 
})
</script>
</body>
</html>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…