[TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기

localStorage란?

데이터를 브라우저에 저장할 수 있는 저장소이다. 저장된 key와 값은 항상 문자당 2바이트를 사용하는 UTF-16 문자열 형식이다. 객체와 마찬가지로 정수 key도 자동으로 문자열로 변환한다.

그래서 localStorage에 저장하려면 객체를 문자열화 시키기 위해 JSON.stringify()를 써야하고

저장한 값을 사용하기 위해서는 JSON.parse()를 사용하여 객체화시켜서 가져와야 한다.

localStorage를 사용하는 이유는 db와 같이 다른 서버 저장소에 이미 저장할 데이터가 많기 때문에

비교적 중요도가 낮은 데이터들을 localStorage에 저장하면 기존 데이터 저장소의 공간을 더 확보 할 수 있기 때문이다.

[참고 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage]

 

아래 예시와 같이 html에 input태그로 얻은 값을 자바스크립트에 변수로 지정하여 저장하려면

 

function saveValue(newValue) {

  let values = JSON.parse(localStorage.getItem("values") || "[]");

  values .push(newValue);

  localStorage.setItem("values", JSON.stringify(values));

}

 

 

localStorage.getItem()으로 가져 올 key를 JSON.parse()로 객체화를 하여 변수로 할당해준다.

push()로 값들을 배열로 추가하여 나열하고

다시 값을 JSON.stringify로 문자열로 변환하여 localStorage.setItem()으로 값을 저장한다.