HTML5 - Web Storage [ทำสั่งพื้นฐาน] localStorage และ sessionStorage

[thatsawan]

ก่อนศึกษาบทความนี้ ขอเเนะนำว่าให้ ศึกษา บทเรียน HTML5
ซึ่งเเนะนำตั้งแต่พื้นฐาน จนถึงการนำ HTML5 ไปใช้กับงานจริง เพื่อให้สามารถทำเข้าใจบทความได้ง่ายขึ้นรวมถึงบทเรียนที่เกี่ยวข้อง บทเรียน CSS ,บทเรียน javascript , เเละ บทเรียน jquery
___________________________________________________________________________________________________________________

HTML5 - Web Storage [ทำสั่งพื้นฐาน]
สำหรับเนื้อหาบทความนี้จะยกตัวอย่างการใช้งานคำสั่งพื้นฐาน ว่าเเต่ละคำสั่งมีความหมายอย่างไรบ้าง

1. คำสั่ง บันทึกหรือเก็บข้อมูล

โค้ด: เลือกทั้งหมด

setItem(key, value)

การใช้งาน localStorage:

โค้ด: เลือกทั้งหมด

   localStorage.setItem('name', 'One');

การใช้งาน sessionStorage:

โค้ด: เลือกทั้งหมด

   sessionStorage.setItem('name', 'One');

2. คำสั่งแสดงผลข้อมูลที่เราเก็บไว้

โค้ด: เลือกทั้งหมด

getItem(key)

การใช้งาน localStorage:

โค้ด: เลือกทั้งหมด

  localStorage.getItem('name')

การใช้งาน sessionStorage:

โค้ด: เลือกทั้งหมด

   sessionStorage.getItem('name')

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<script>

        sessionStorage.setItem('name', 'One');
        sessionStorage.setItem('age', '20');

        var name = sessionStorage.getItem('name');
        var age = sessionStorage.getItem('age');
        
        console.log(name); 
        console.log(age);
</script>

ผลที่ได้ console.log(name); => One
ผลที่ได้ console.log(age); => 20

3. คำสั่งลบค่าที่เคยบันทึกไว้

โค้ด: เลือกทั้งหมด

removeItem(key)

การใช้งาน localStorage:

โค้ด: เลือกทั้งหมด

  localStorage.removeItem('name')

การใช้งาน sessionStorage:

โค้ด: เลือกทั้งหมด

   sessionStorage.removeItem('name')

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

โค้ด: เลือกทั้งหมด

  sessionStorage.setItem('name', 'One');
        sessionStorage.setItem('age', '20');

        sessionStorage.removeItem('name');

        var name = sessionStorage.getItem('name');
        var age = sessionStorage.getItem('age');

        console.log(name);
        console.log(age);

ผลที่ได้ console.log(name); => null
ผลที่ได้ console.log(age); => 20

4.key(n)

โค้ด: เลือกทั้งหมด

        sessionStorage.setItem('www', '121');
        var key = sessionStorage.key(0);
        console.log(

ผลที่ได้ console.log(key); => www

5.คำสั่ง clear()

การใช้งาน sessionStorage:

โค้ด: เลือกทั้งหมด

   sessionStorage.clear(); 

ลบข้อมูลที่จัดเก็บไว้ทั้งหมด

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

โค้ด: เลือกทั้งหมด

        sessionStorage.setItem('b', '121');
        sessionStorage.setItem('a', '200');
        var total = sessionStorage.length;
        console.log(total); 

ผลที่ได้ console.log(total); => 2

*ถ้าต้องการใช้ sessionStorage ให้แทนคำสั่งด้วย localStorage


อ่านเพิ่มเติมได้ที่ บบที่ 9 HTML5 Web Storage เทคโนโลยีการเก็บข้อมูลแบบใหม่ในภาษา html5