JavaScript - สร้าง Session ใน JavaScript
ใน JavaScript นั้นทำงานที่ฝั่ง Client ซึ่งยากต่อการประมวลผลในรูปแบบที่เหมือน Server Side Script โดยเฉพาะอย่างยิ่งเรื่องของ Session ถ้าเป็น PHP ละก็ง่ายนิดเดียวแค่ประกาศ session_start(); และกำหนด Session เช่น $_SESSION['myname']="Manop Kongoon"; ก็เรียบร้อยแล้ว แต่ใน JavaScript จะทำยังไงล่ะ
หลังจากที่เกิดปัญหากับการใช้ Spry Tab ของ Dreamweaver CS5 แล้ว โดยเจ้าปัญหามีอยู่ว่า "หลังจากที่เลือก Tab แล้วพอมีการ Refresh หน้าเว็บ Tab จะไปเริ่มที่ Tab แรกเสมอ เช่น เราเลือก Tab ที่ 10 แล้วกรอกข้อมูลเพื่อบันทึกข้อมูล เมื่อกดปุ่มบันทึกหน้าเว็บจะเปลี่ยนไปหน้าประมวลผล แล้วย้อนกลับมาที่หน้าเดิม ผลคือ Tab แรกจะถูกเลือก ทำให้ต้องเสียเวลาไปกด Tab 10 ใหม่ เป็นต้น"
โอเคครับมาเริ่มกันเลยดีกว่า
ไฟล์ cookie.js
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
-------------------------------------------------------------------
วิธีการใช้งาน
ไฟล์ที่มี Spry TabbedPanels
<script type="text/javascript" src="js/cookie.js"></script>
ในส่วนของการเลือก Tab ใน Spry ให้ใส่ดังนี้
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onmousedown="createCookie('cur_tab',0);">ข้อมูลส่วนตัว</li>
<li class="TabbedPanelsTab" tabindex="1" onmousedown="createCookie('cur_tab',1);">ประวัติการศึกษา</li>
<li class="TabbedPanelsTab" tabindex="2" onmousedown="createCookie('cur_tab',2);">ประวัติการไปราชการ ฝึกอบรม และดูงาน</li>
<li class="TabbedPanelsTab" tabindex="3" onmousedown="createCookie('cur_tab',3);">ชี้แจงข้อเท็จจริง</li>
<li class="TabbedPanelsTab" tabindex="4" onmousedown="createCookie('cur_tab',4);">การได้รับโทษทางวินัย</li>
<li class="TabbedPanelsTab" tabindex="5" onmousedown="createCookie('cur_tab',5);">วันที่ไม่ได้รับเงินเดือน</li>
<li class="TabbedPanelsTab" tabindex="6" onmousedown="createCookie('cur_tab',6);">ตำแหน่งและอัตราเงินเดือน</li>
<li class="TabbedPanelsTab" tabindex="7" onmousedown="createCookie('cur_tab',7);">รูปถ่าย</li>
<li class="TabbedPanelsTab" tabindex="8" onmousedown="createCookie('cur_tab',8);">เครื่องราชอิสริยาภรณ์</li>
<li class="TabbedPanelsTab" tabindex="9" onmousedown="createCookie('cur_tab',9);">วันขาด ลา มาสาย</li>
<li class="TabbedPanelsTab" tabindex="10" onmousedown="createCookie('cur_tab',10);">ความสามารถพิเศษ</li>
<li class="TabbedPanelsTab" tabindex="11" onmousedown="createCookie('cur_tab',11);">การปฏิบัติราชการเป็นพิเศษ</li>
<li class="TabbedPanelsTab" tabindex="12" onmousedown="createCookie('cur_tab',12);">รายการอื่นๆ ที่จำเป็น</li>
</ul>
ส่วนท้ายของไฟล์หาส่วนนี้แล้วแก้ไขนิดหน่อยครับ
<script type="text/javascript">
<!--
var cu_tab = parseInt(readCookie('cur_tab'));
//alert(cu_tab);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanelsMain", { defaultTab: cu_tab});
//-->
</script>
defaultTab คือ Tab เริ่มต้นตอนเรียกไฟล์ครั้งแรก
ลองทดสอบดูนะครับผมลองแล้วใช้ได้ผลดีมากครับ
ระบบที่ทำอยู่ในข้างต้นคือ ระบบฐานข้อมูลประวัติข้าราชการและบุคลากรมหาวิทยาลัยราชภัฎ (ePersonal) ลองทดสอบดูได้ที่ http://personal.vspruakolfi.com ^ ^
ความเห็น (4)
อ่านแล้วอย่าลืมแสดงความคิดเห็นด้วยนะครับ
Thank You sir.
เทพจริงๆๆ
songsaluang
ใช้งานได้ดี ขอขอบคุณสำหรับการแบ่งปันครับ