[JavaScript] XML, JSON, WebStorage

1. XML, JSON

 

가. XML

let parser = new DOMParser();
let xmlString = `<root>
                    <element>Some text here</element>
                 </root>`;
let xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Get the text from the <element> tag
let elementText = xmlDoc.getElementsByTagName("element")[0].childNodes[0].nodeValue;

console.log(elementText); // Outputs: "Some text here"

XML을 파싱하고 값을 읽어오는 방법이다.

 

파싱을 통해서 DOM만 생성하면 나머지는 HTML과 동일하다.

 

---

나. JSON

let jsonString = `{
  "name": "John",
  "age": 30,
  "city": "New York"
}`;

let jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name); // Outputs: "John"

다른 프로그래밍 언어에서도 사용할 수 있다.

 

MIME 타입은 application/json이다.

 

---

다. XML vs JSON

 

JavaScript에서 동일한 데이터 기준으로 …

• JSON은 XML보다 구문이 짧고 간결함. 종료 태그가 없다.
• JSON 데이터가 XML 데이터보다 빨리 읽고 쓸 수 있다.
• XML은 배열 사용이 불가능.
• XML은 XML 파서가 필요하지만 JSON은 자바스크립트의 함수로 변환한다.
• XML은 문서의 DOM을 이용하여 태그에 접근해야 한다. 이는 JSON보다 처리속도가 느리다.
• 단, JSON은 전달받은 데이터의 무결성을 직접 검증해야 한다.

 

---

라. JSON method

 

• JSON.stringify(JSON 형식의 object); : 직렬화
• JSON.parse(JSON 형식의 문자열); : 역직렬화
• Date.prototype.toJSON(); : Date 객체의 데이터를 JSON 형식의 문자열로 변환

 

---

2. Web Storage

 

[Node.js] 쿠키의 한계

 

• LocalStorage, SessionStorage

method	description
localStorage.setItem(key, value)	key - value를 쌍으로 저장.
localStorage.getItem(key)	key에 해당하는 데이터 읽기.
localStorage.removeItem(key)	key에 해당하는 데이터 삭제.
localStorage.clear()	모든 key의 데이터 삭제.
localStorage.key(index)	index에 해당하는 key.
localStorage.length	저장된 key-value 쌍의 개수.

 

저장되는 모든 key, value는 문자열이다.

 

// Object to store
let obj = {
  name: "John",
  age: 30,
  city: "New York"
};

// Store object in LocalStorage
// Use JSON.stringify() to serialize the object
localStorage.setItem('user', JSON.stringify(obj));

// Retrieve object from LocalStorage
// Use JSON.parse() to deserialize the object
let retrievedObj = JSON.parse(localStorage.getItem('user'));

console.log(retrievedObj); // Outputs: { name: "John", age: 30, city: "New York" }

그래서 객체를 저장할 때는 직렬화, 불러올 때는 역직렬화를 수행해야 한다.

 

---