JavaScript Window History State
خاصية State مع كائن Window History في لغة جافا سكريبت
سوف تتعلم في هذا الدرس ،على خاصية history state في لغة جافا سكريبت، وكيفة إضافة معلومات حول الصفحة الحالية داخل سجل المتصفح وإرجاعها وقت الحاجه.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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>
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
