ตามจริง เรื่อง web storage หลายที่มีการใช้งานนานแล้ว แต่ที่นี่เพิ่งมาเขียน
เนื้อหา ยังไงก็สร้างหมวด html5 มาแล้ว เพิ่มซักบทความคงไม่เป็นไร
web storage ไม่เคยใช้มาก่อน (ก่อนเริ่มบทความนี้) แต่พอไปไล่อ่านตามเว็บต่างๆ
ก็พอจะเข้าใจ และมองว่าใช้งานง่ายมาก ง่ายกว่า cookie เสียอีก บราวเซอร์ส่วนใหญ่ก็รองรับแล้ว
ก็หวังว่าจะมีปรโยชน์ และนำมาใช้ได้บ่อยๆ
Web Storage จะมี object ให้มาใช้งาน 2 ตัวคือ
localStorage กับ sessionStorage (อย่าลืมว่า ตัวเล็กตัวใหญ่ค่าต่างกัน ระวังพิมพ์ผิด)
localStorage เก็บข้อมูลไว้ตลอด ไม่มีหมดอายุ
sessionStorage เก็บข้อมูลชั่วคราว ปิดหน้าต่างเพจ หรือ แท็บ ข้อมูลจะหายไป
ทั้ง localStorage และ sessionStorage จะมีคำสั่งในการใช้งานเหมือนกัน
การกำหนดค่า
จะกำหนดในรูปแบบ name / value เช่น website="ninenik.com"
ใช้คำสั่ง เขียนได้สองแบบ
1 2 3 4 5 | localStorage.website="ninenik.com";sessionStorage.website="ninenik.com";// หรือ localStorage.setItem("website","ninenik.com"); sessionStorage.setItem("website","ninenik.com"); |
การกำหนดค่ากรณี value เป็น object
ให้เข้าใจว่า ปกติค่า value ต้องเป็น string เท่านั้น
ดังนั้นการจะใช้ตัวแปร object มากำหนดเป็น value ต้องทำให้เป็น string ก่อน
โดยใช้คำสั่ง JSON.stringify() เข่น
1 2 3 4 5 | var user = { name:"ninenik", tel:"080808080"};localStorage.user=JSON.stringify(user); |
การรับค่าข้อมูล
1 2 3 4 5 | var website_loc=localStorage.website;var website_ses=sessionStorage.website;// หรือvar website_loc=localStorage.getItem("website"); var website_ses=sessionStorage.getItem("website"); |
การรับค่าข้อมูล string ที่ถูกเปลงค่ามาจาก object
ด้วยคำสั่ง JSON.stringify() ตามอธิบายด้านบน
หากต้องการเปลี่ยนเป็น object สามารถใช้คำสั่ง JSON.parse();
ตัวอย่าง
1 2 3 4 5 6 | var user = { name:"ninenik", tel:"080808080"};localStorage.user=JSON.stringify(user);var obj_user=JSON.parse(localStorage.user); |
การลบข้อมูล ตามชื่อ ที่เก็บค่า
1 2 | localStorage.removeItem("website"); sessionStorage.removeItem("website"); |
การลบข้อมูลทั้งหมด
1 2 | localStorage.clear();sessionStorage.clear(); |
หาจำนวนข้อมูลที่เก็บ
1 2 | localStorage.length;sessionStorage.length; |
หาชื่อที่เก็บข้อมูลจาก index key
1 2 | var name_loc=localStorage.key(index); // index มีค่า 0 ถึง จำนวนข้อมูล - 1var name_ses=sessionStorage.key(index); // index มีค่า 0 ถึง จำนวนข้อมูล - 1 |
ตัวอย่าง
localStorage / sessionStorage
| localStorage | sessionStorage | |
|---|---|---|
|
localStorage.name=$("#name").val(); sessionStorage.tel=$("#tel").val(); |
||
|
var name_loc=localStorage.name; var tel_ses=sessionStorage.tel; |
name_loc = :undefined | tel_ses = :undefined |
|
var nameK_loc=localStorage.key(0); var nameK_ses=sessionStorage.key(0); |
||
|
localStorage.clear(); sessionStorage.clear(); |
null | null |
|
localStorage.length; sessionStorage.lenght; |
0 | 0 |
เพิ่มเติม ฟังก์ชั่นสำหรับตรวจสอบว่า browser รองรับ web storage หรือไม่
1 2 3 | function hasStorage(){ return typeof(Storage)!=="undefined"?true:false; } |
การใช้งาน
1 2 3 | if(hasStorage()){ // รองรับ web storage } |
