[JASON] 로컬스토리지(Local storage)에 저장할 때 JSON.stringify()과 JSON.parase()의 활용

To Do List 를 만드는 과정에서 추가된 list들을  로컬스토리지에 저장하는 과정이다. 

 

이 과정에서 우리가 꼭 해줘야할 과정이 있다. 

 

---

- 간략 설명 -

 

로컬스토리지(local storage)와 서버에 저장을 할 때 오직 문자열(string)형태로 저장이 된다.

이는 배열이나 객체형태로 저장이 되지 않는다는 뜻이다. 

 

하지만 우리는 대부분의 경우 객체, 배열(array)의 각각 item을 가지고 활용하는 경우가 많다.

그 각각의 item 에 대해 function을 실행하는 경우도 많다. 

그렇기 때문에 문자열만으로 저장된 저장소안에서 객체로 바꿔주는 과정이 필요하다. 

 

이 때 로컬스토리지나 서버의 문자열을  JSON.stringify로 array(배열)처럼 생긴 string(문자열)으로 저장을 해준 후 

다시 JSON.parse를 이용해 객체로 꺼내는 과정이 필요하다. 

 

---

- 간단한 예제로 이해하자 -

 

List 에 텍스트를 넣고 toDos라는 array를 만들어 로컬스토리지(Local storage)에 담아준다. 

 

const toDos = [];

function saveToDos() {
  localStorage.setItem("todos", toDos);
}

saveToDos();

 

Lists

• tomato
• orange
• apple

그 때의 로컬스토리지(Local storage)를 보면 Value 값에 tomato,orange.apple 로 들어간다. 이는 문자열(string)형태이다.

 

Local storage :

Key	Value
todos	tomato,orange.apple

 

여기서 로컬스토리지의 값들을 배열(array)로 바꿔주기 위해 JSON.stringify()를 쓴다. 

 

JSON.stringify() - 직렬화(serializing)

객체를 JSON 포맷의 문자열로 변환한다.

즉, 객체나 배열처럼 보이게끔 바꿔주지만, 아직은 string(문자열) 상태임을 잊지말자.

 

// ex)
const player = { name: "Kelly" };

const stringified = JSON.stringify(player);
console.log("stringified :", stringified);
// stringified : {"name":"Kelly"}

 

JSON.stringify() 를 써준다. 

 

const toDos = [];

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(toDos));
}

saveToDos();

 

Local storage :

Key	Value
todos	["tomato","orange","apple"]

---

JSON.parse() - 역직렬화(deserializing)

JSON 포맷의 문자열을 객체로 변환한다. 앞서 변경된 문자열을 객체로서 사용하기 위해 꼭 필요한 과정이다. 

 

// ex)
const player = { name: "Kelly" };

const stringified = JSON.stringify(player);
console.log("stringified :", stringified);
// stringified : {"name":"Kelly"}

const parsed = JSON.parse(stringified);
console.log("parsed : ", parsed);
// parsed :  {name: 'Kelly'}

 

예제를 보면

{"name":"Kelly"} 에서 {name: 'Kelly'} 로 객체로 정리가 된 것을 확인할 수 있다. 

 

 

로컬스토리지에 리스트들을 저장하기 위해 savedToDos()라는 변수를 만들었고,

로컬스토리지 안의 키값이 "todos"인 value들이 없으면(savedToDos !== null) JSON.parse()로 객체화 시켜준다. 

 

const savedToDos = localStorage.getItem("todos");
console.log(savedToDos);

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  console.log(parsedToDos);
}

// savedToDos: ["tomato","orange","apple"]
// parsedToDos: (3) ['tomato', 'orange', 'apple']0: "tomato"1: "orange"2: "apple"length: 3[[Prototype]]: Array(0)

 

 

이런 과정이 있어야. 객체 안의 각 아이템들을 쓰고, 꺼내고 활용할 수 있게된다.