JSON and Session Storage

# การใช้งาน JSON และ Session Storage ในการพัฒนาเว็บ

โลกของการพัฒนาเว็บในปัจจุบันนี้มีเทคโนโลยีและเครื่องมือมากมายที่สามารถช่วยให้นักพัฒนาสามารถสร้างเว็บไซต์ที่มีประสิทธิภาพและใช้งานได้ดีขึ้น วันนี้เราจะมาพูดถึงเทคโนโลยีสองอย่างที่มีบทบาทสำคัญ นั่นคือ JSON (JavaScript Object Notation) และ Session Storage

JSON คืออะไร?

JSON ย่อมาจาก JavaScript Object Notation เป็นรูปแบบการเก็บข้อมูลที่มีโครงสร้าง ซึ่งทำให้สามารถจัดเก็บและแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และคลายเอนต์ได้อย่างง่ายดาย โดย JSON เป็นรูปแบบข้อมูลที่มนุษย์สามารถอ่านได้ ไม่ว่าจะเป็นนักพัฒนาหรือระบบคอมพิวเตอร์ก็สามารถเข้าใจได้โดยง่าย

ตัวอย่างที่ JSON ถูกใช้งานมากคือการแลกเปลี่ยนข้อมูลในเว็บแอปพลิเคชัน และ API ต่างๆ ในการที่จะใช้ JSON นั้น เราสามารถจัดเก็บข้อมูลให้อยู่ในรูปแบบ key-value pair ได้อย่างมีประสิทธิภาพ เช่น

{
    "name": "นวล",
    "age": 25,
    "skills": ["JavaScript", "HTML", "CSS"]
}

การใช้งาน JSON จริง

ตัวอย่างการใช้ JSON ในเว็บแอปพลิเคชันจริง ๆ เช่น การนำข้อมูลผู้ใช้จากเซิร์ฟเวอร์ไปยังหน้าเว็บ หรือการส่งข้อมูลฟอร์มกลับไปยังเซิร์ฟเวอร์ มาดูตัวอย่างโค้ดการใช้ JSON ใน JavaScript เพื่อส่งคำร้องขอไปยังเซิร์ฟเวอร์

const user = {
    name: "นวล",
    age: 25
};

fetch('https://example.com/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Session Storage คืออะไร?

Session Storage เป็นหนึ่งใน Web Storage API ที่ให้เราเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้ได้ ข้อมูลนี้จะถูกลบทิ้งเมื่อเซสชันของเบราว์เซอร์จบลง (เช่น การปิดแท็บเบราว์เซอร์) Session Storage เหมาะกับการเก็บข้อมูลชั่วคราวที่เราต้องใช้ภายในเซสชันเดียวกัน แต่ไม่จำเป็นต้องคงอยู่หากผู้ใช้ปิดเบราว์เซอร์

ลองมาดูตัวอย่างการใช้งาน Session Storage ใน JavaScript:

// เก็บข้อมูล
sessionStorage.setItem('username', 'nuan');

// ดึงข้อมูล
const username = sessionStorage.getItem('username');
console.log(username); // Output: nuan

// ลบข้อมูล
sessionStorage.removeItem('username');

// ลบข้อมูลทั้งหมด
sessionStorage.clear();

การใช้ JSON กับ Session Storage ร่วมกัน

การรวม JSON กับ Session Storage สามารถทำให้นักพัฒนาสามารถเก็บข้อมูลในรูปแบบโครงสร้างที่ชัดเจนและง่ายต่อการเข้าถึง มาดูการใช้งานจริงว่าทั้งสองสามารถทำงานร่วมกันได้อย่างไร

const userPreferences = {
    theme: "dark",
    fontSize: 16
};

// แปลง object ไปเป็น JSON และเก็บไว้ใน Session Storage
sessionStorage.setItem('preferences', JSON.stringify(userPreferences));

// ดึงข้อมูลจาก Session Storage แล้วแปลงกลับมาเป็น object
const preferences = JSON.parse(sessionStorage.getItem('preferences'));
console.log(preferences.theme); // Output: dark

ข้อดีและข้อเสีย

JSON

ข้อดี:

- อ่านและเข้าใจง่าย

- รองรับหลายภาษาโปรแกรม

- ขนาดไฟล์เล็ก ทำให้ประหยัดแบนด์วิดธ์

ข้อเสีย:

- ไม่สามารถเก็บข้อมูลซับซ้อน เช่น function หรือ method

Session Storage

ข้อดี:

- ใช้งานง่าย

- เก็บข้อมูลที่ใช้ภายในเซสชันเดียวได้สะดวก

ข้อเสีย:

- ข้อมูลทั้งหมดจะหายไปเมื่อปิดเบราว์เซอร์

บทสรุป

JSON และ Session Storage เป็นเครื่องมือที่มีประสิทธิภาพในการพัฒนาเว็บแอปพลิเคชัน การรวมกันใช้ทำให้การจัดการข้อมูลบนฝั่งผู้ใช้สะดวกและมีประสิทธิภาพมากยิ่งขึ้น ดังนั้น เพื่อเป็นการเสริมความรู้และทักษะในการเขียนโปรแกรมที่มีคุณภาพ ผู้ที่สนใจสามารถศึกษาต่อทางด้านการเขียนโปรแกรมที่โรงเรียน Expert-Programming-Tutor (EPT) ซึ่งเป็นแหล่งเรียนรู้ที่ทันสมัยและครอบคลุมทุกด้านของการพัฒนาโปรแกรมที่จำเป็นในยุคดิจิทัลนี้

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/