JSON and Local Storage in Browsers

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

ทำความรู้จักกับ JSON

JSON เป็นรูปแบบข้อมูลแบบเบาซึ่งมีความนิยมอย่างมากในโปรแกรมมิ่งยุคใหม่ เนื่องจากความเรียบง่ายและสะดวกในการใช้งาน โดย JSON มีการทำงานในรูปแบบ key-value pairs ซึ่งช่วยให้สามารถเก็บข้อมูลที่มีโครงสร้างซับซ้อนได้ในรูปแบบที่มนุษย์อ่านได้เข้าใจง่าย

ตัวอย่างการสร้าง JSON ข้อมูลผู้ใช้:

{
  "name": "ศิรินารถ",
  "age": 25,
  "hobbies": ["อ่านหนังสือ", "ว่ายน้ำ", "เดินทาง"]
}

การแปลงข้อมูลระหว่าง JSON และ Object ใน JavaScript

เมื่อต้องการเปลี่ยนข้อมูลจาก JSON เป็น JavaScript Object เราสามารถใช้ฟังก์ชั่น `JSON.parse()` ได้ และเมื่อเราต้องการแปลงจาก Object เป็น JSON เราจะใช้ `JSON.stringify()` ดูตัวอย่างได้ดังนี้:

const jsonString = '{"name": "ศิรินารถ", "age": 25}';
const userObject = JSON.parse(jsonString);

console.log(userObject.name); // Output: ศิรินารถ

const jsonObject = { name: "พิภพ", age: 29 };
const userJson = JSON.stringify(jsonObject);

console.log(userJson); // Output: {"name":"พิภพ","age":29}

Local Storage: การเก็บข้อมูลที่สำคัญฝั่งลูกข่าย

Local Storage คือหนึ่งใน Web Storage APIs ที่เป็นประโยชน์มากในการเก็บข้อมูลระหว่าง session ของผู้ใช้บนเบราว์เซอร์โดยไม่เกี่ยวข้องกับเซิร์ฟเวอร์ ข้อดีของ Local Storage คือสามารถเก็บข้อมูลได้มากถึง 5MB และข้อมูลจะไม่ถูกลบทิ้งเมื่อปิดเบราว์เซอร์

วิธีการใช้งาน Local Storage:

// การบันทึกข้อมูลลงใน local storage
localStorage.setItem('username', 'กรกช');

// การดึงข้อมูลออกจาก local storage
const username = localStorage.getItem('username');

console.log(username); // Output: กรกช

// การลบข้อมูลจาก local storage
localStorage.removeItem('username');

การใช้งานร่วมกันระหว่าง JSON และ Local Storage

การใช้ JSON และ Local Storage ร่วมกันจะมีประโยชน์อย่างยิ่งเมื่อเราต้องการจัดการข้อมูลที่ซับซ้อน เช่น เก็บข้อมูลผู้ใช้ในรูปแบบของ JSON และจัดเก็บใน Local Storage:

const user = { name: "วรณัน", age: 30 };
const userJson = JSON.stringify(user);

// บันทึก JSON ใน local storage
localStorage.setItem('user', userJson);

// การดึง JSON จาก local storage
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // Output: วรณัน

บทสรุป

JSON และ Local Storage นับว่าเป็นเครื่องมือที่มีพลังในโลกของการพัฒนาเว็บในปัจจุบัน ความเข้าใจและการใช้งานที่ถูกต้องจะช่วยให้การจัดการข้อมูลในฝั่งผู้ใช้มีประสิทธิภาพและประโยชน์สูงสุด ไม่ว่าจะเป็นการเก็บข้อมูลระหว่าง session หรือการแปลงข้อมูลง่ายๆระหว่างเบราว์เซอร์และเซิร์ฟเวอร์

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

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

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