HTML5 ใช้ JavaScript เก็บค่าตัวแปรที่ Client ด้วย localStorage และ sessionStorage (Web Storage) ในการเขียนโปรแกรมที่ทำงานบน Web จะเห็นว่าทุกวันนี้มีการพัฒนา User Interface ที่สามารถทำงานได้อย่างรวดเร็ว สามารถตอบสนองข้อมูลทันทีทันใด ส่วนหนึ่งเป็นเพราะมีการจัดการกับค่าตัวแปรที่ต้องการนำไปกับการจัดการกับ UI ต่าง ๆ ได้ในทันที ซึ่งวิธีการเหล่านี้ในสมัยแรก ๆ ในการส่งค่าตัวแปรไปยัง Page ต่าง ๆ อาจจะต้องส่งผ่าน Cookies ของ JavaScript หรืออาจจะส่งไปยัง Web Server แล้วใช้พวก PHP เก็บค่าแล้วค่อยส่งมันกลับมายัง Client ซึ่งจะเห็นว่าในหลายๆ ครั้งการเรียกค่าตัวแปรมาใช้งานค่อนข้างจะลำบากมาก
HTML5 Web Storage (localStorage / sessionStorage)
ใน HTML 5จึงได้ออกแบบ Web Storage เข้ามาจัดการกับปัญหาเหล่านี้ โดยในรูปแบบของ Storage จะมีอยู่ 2 ประเภทคือ localStorage และ sessionStorage การทำงานของมันทั้ง 2 ตัวนี้จะคล้าย ๆ กันแตกต่างกันตรงที่
– localStorage หลักการทำงานเหมือน Cookies คือ จะอยู่ตลอดไป แม้ว่าจะปิด Web Browser หรือ Restart เครื่องก็ตาม
– sessionStorage หลักการเหมือนกับ Session คือจะหายไป เมื่อทำการปิด Web Browser หรือ Restart
จากเหตุผลที่แตกต่างกันเราก็น่าจะเลือกได้ถูกต้องว่าจะใช้งานตัวไหนระหว่าง localStorage กับ sessionStorage และจากเหตุผลในข้างต้นคือ มันถูกจัดเก็บไว้ที่ Client ฉะนั้นข้อมูลหรอตัวแปรที่จะจัดเก็บจะมีความปลอดภัยที่ต่ำมาก ฉะนั้นในการใช้งานก็ควรจะเลือกจัดเก็บค่าที่คิดว่าไม่สำคัญ สามารถเปิดเผยได้โดยไม่มีผลในด้านความปลอดภัย เมื่อถูกคุกคามจากผู้ที่ไม่ประสงค์ดี อละอีกความสามารถหนึ่งของ Web Storage คือสามารถเก็บข้อมูลขนาดใหญ่ได้ถึง 5 MB เลยทีเดียว และสามารถเก็บค่าได้เฉพาะ String หรือข้อความเท่านั้น
จะใช้ Web Storage จะต้องทำอย่างไร เนื่อจากเป็น Feature ของ Web Browser ที่รองรับ HTML5 ดังนั้นในการพัฒนาเว็บไวต์ ในยุคปัจจุบัน จะสามารถใช้งาน Web Storage ได้ในทันที ซึ่งจะอยู่ที่ปัจจัยของ Version บน Web Browser
Note! เนื่องจาก Web Storage จะรองรับ Web Browser เวอร์ชั่นขั้นต่ำที่กำหนดไว้ ฉะนั้นการใช้งานในเวอร์ชั่นที่ต่ำกว่า จะไม่สามารถใช้งาน Web Storage ได้
localStorage ตัวอย่างการใช้งานแบบง่าย ๆ
การสร้างตัวแปร
1.
localStorage.setItem(
"site"
,
"thaicreate.com"
);
เป็นการกำหนดตัวแปรชื่อ site เก็บค่า thaicreate.com สามารถประกาศได้อีกรูปแบบคือ localStorage.site = “thaicreate.com”;
การอ่านค่าตัวแปร
1.
localStorage.getItem(
"site"
);
เป็นการอ่านตัวแปรชื่อ site ซึ่งจะได้ค่า thaicreate.com สามารถเรียกได้อีกรูปแบบคือ localStorage.site;
การลบค่าตัวแปร
1.
localStorage.removeItem(
"site"
);
เป็นการลบตัวแปรชื่อ site
การอ่านค่าตัวแปรอ้างจาก Key
1.
localStorage.key(0);
โดยปกติค่าจะเรียกจากลำดับที่ถูกสร้าง
การลบค่าตัวแปรทั้งหมด
1.
localStorage.clear();
ลบค่าทั้งหมด
sessionStorage รูปแบบการใช้งานไม่ต่างไปจาก localStorage เช่น
1.
sessionStorage.setItem(
"site"
,
"thaicreate.com"
);
2.
sessionStorage.getItem(
"site"
);
3.
sessionStorage.removeItem(
"site"
);
ตัวอย่างการใช้งาน สำหรับตัวอย่างนี้จะเป็นการยกตัวอย่างสร้างเพจขึ้นมา 2 หน้า โดยรับค่าจาก เพจแรก และส่งไปยัง เพจสอง
page1.html
01.
<html>
02.
<head>
03.
<script type=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
></script>
04.
05.
</head>
06.
<body>
07.
<p>localStorage & sessionStorage</p>
08.
Input your name <input type=
"text"
id=
"txtName"
name=
"txtName"
> <br />
09.
Input your email <input type=
"text"
id=
"txtEmail"
name=
"txtEmail"
> <br /><br />
10.
<input type=
"button"
id=
"btnNext"
value=
"Next"
>
11.
</body>
12.
<script type=
"text/javascript"
>
13.
$(document).ready(
function
(){
14.
15.
// validate support storage
16.
if
(
typeof
(Storage) ==
"undefined"
) {
17.
alert(
"Not storage support"
);
18.
}
19.
20.
// button click
21.
$(
"#btnNext"
).click(
function
(){
22.
23.
// set storage
24.
localStorage.setItem(
"sName"
, $(
"#txtName"
).val());
25.
localStorage.setItem(
"sEmail"
, $(
"#txtEmail"
).val());
26.
27.
window.location=
"page2.html"
;
28.
});
29.
});
30.
</script>
31.
</html>
page2.html
01.
<html>
02.
<head>
03.
<script type=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
></script>
04.
05.
</head>
06.
<body>
07.
<p>Hello</p>
08.
Name : <span id=
"spName"
></span> <br />
09.
Email : <span id=
"spEmail"
></span> <br /><br />
10.
<input type=
"button"
id=
"btnClear"
value=
"Clear"
>
11.
</body>
12.
<script type=
"text/javascript"
>
13.
$(document).ready(
function
(){
14.
15.
// get value from storage
16.
$(
"#spName"
).html( localStorage.getItem(
"sName"
));
17.
$(
"#spEmail"
).html( localStorage.getItem(
"sEmail"
));
18.
19.
// button click
20.
$(
"#btnClear"
).click(
function
(){
21.
localStorage.removeItem(
"sName"
);
22.
localStorage.removeItem(
"sEmail"
);
23.
window.location.reload();
24.
});
25.
});
26.
</script>
27.
</html>
แหล่งที่มา : http://www.thaicreate.com/community/html5-javascript-localstorage-sessionstorage.html