JavaScript

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

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

التاريخ

21 نوفمبر 2023

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

608

المواضيع

24
الشروحات chevron_left JavaScript Window History State chevron_left JavaScript

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

</> 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 طريقة فعالة لتغيير المحتوى المعروض وتخزين معلومات الحالة في تطبيق ويب ، ويمكن استخدامها لإنشاء تجربة مستخدم أكثر سلاسة واستجابة.

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

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

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

JavaScript Window History State Value

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

<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>
هام
القيمة الافتراضية لخاصية history.state هي فارغة null. هذا يعني السجل الحالي لا يحتوي اي معلومات داخل كائن state ، فإن خاصية history.state سترجع خالية.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.