Html5 Develop - WebStorage

Storage คือ แหล่งเก็บข้อมูลพื้นฐานโดย ใน Html5 สามารถเก็บข้อมูลพื้นฐานได้สองแบบคือ LocalStorage และ sessionStorage

แล้วสองอย่างนี้ดีกว่า Cookie ยังไง?

-         คุ้กกี้มีข้อจำกัดที่เก็บข้อมูลได้ที่ 4KB เท่านั้นแต่ LocalStorage และ SessionStorage มีขนาดใหญ่กว่ามาก

-         LocalStorage และ SessionStorage เร็วกว่าข้อมูล Cookie

LocalStorage กับ Session Storage ควรใช้อันไหน?

-         อยู่ที่สถานการณ์ใช้งานโดย LocalStorage จะอยู่ตลอดไม่มีวันหายไปแต่ SessionStorage จะหมดไปเมื่อปิด Windows หรือ Tab

คำสั่งพื้นฐาน คำสั่งเหล่านี้สามารถใช้ได้ทั้ง sessionStorage และ LocalStorage

setItem(key,value) ใช้สำหรับเก็บข้อมูลและสร้างค่าเริ่มต้น ตัวอย่างการเซ็ตค่า

LocalStorage - localStorage.setItem('textSize', 'large');

SessionStorage- sessionStorage.setItem(‘textSize’,’large’);

-         getItem(key) ดึงข้อมูลโดยใช้คีย์ที่ระบุ

-         removeItem(key) ลบข้อมูลตามคีย์

-         key(n) แสดงชื่อของkey ตาม index ที่ระบุโดยเริ่มต้นที่ 0

-         clear() ลบข้อมูลที่เก็บไว้ทั้งหมด(เฉพาะโดเมินนั้นๆ)

-         length แสดงจำนวนข้อมูลที่เก็บไว้ทั้งหมด

                                 

SessionStorage มีวิธีเรียกใช้ได้ง่ายๆดังตัวอย่างต่อไปนี้

if (sessionStorage.clickcount)
    {
                sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
          sessionStorage.clickcount=1;
    }

document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

สำหรับการใช้ Web Storage บาง Browser อาจจะยังไม่ Support จำเป็นต้องใช้ Code ทดสอบดังนี้

if(typeof(Storage)!=="undefined")
  {

  }

else
  {
                document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }

ตัวอย่างการใช้ LocalStroage

localStorage.pageid = 5;//เซ็ตค่าใส่ LocalStorage ชื่อ Pageid

การประยุกต์ การเขียนโปรแกรม แบบ Web ใหใช้ Storage ในฝั่ง Client มากขึ้น ทำให้สามารถเปิดกว้างในการพัฒนาได้มากขึ้นสามารถชี้ให้เห็นถึงประโยชน์ได้ดังนี้

•  LocalStorage จะอยู่จนกว่าจะมีการเคลียร์ข้อมูลของ Browser ทำให้ Developer ที่มีประสบการณ์สามารถ จัดการกับข้อกังวลในการพัฒนาข้ามแพลตฟอร์มไปยัง Mobile ได้
•  SessionStorage จะอยู่จนกว่าจะปิด Browser แทน Session นั่นหมายความว่า Developer สามารถใช้ Session ที่อยู่ในฝั่ง Client ได้ง่ายขึ้น ทำให้ Server ลดการทำงานลง พร้อมกับ Developer สามารถเขียนโปรแกรมฝังลงในฝั่ง Client และทำการเรียกโดยผ่าน Ajax ทำให้ขั้นตอนในการพัฒนา ลดภาระ Server ลงอย่างเห็นได้ชัด
• ข้อควรระวัง

-         WebStorage จะมีขนาดจำกัด ทั้ง SessionStorage และ LocalStorage ฉะนั้น การใช้ตัวแปรประเภทนี้ ควรจะมีการคิดว่า ขนาดไม่ควรจะเกิดกี่ KB

-         ข้อมูลของตัวแปร WebStorage จะอยู่ในรูปแบบของ String หากต้องการประยุกต์ใช้ ยกตัวอย่างเช่น int ควรจะทำการ Parse() ซะก่อน จึงจะนำมาใช้งานไม่งั้น อาจจะเกิดการไล่กันจนงงได้