10. localStorage에 데이터 저장하기

localStorage는 웹 브라우저에서 제공하는 웹 스토리지 기능 중 하나로 다음과 같은 특징을 가지고 있다. 

1. 5MB의 문자 데이터를 저장할 수 있다. 

2. key : value 형태로 저장이 된다. 

3. 저장된 데이터는 브라우저를 닫아도 유지된다.(직접 삭제하지 않는 이상 영속적으로 유지 가능) 

4. 숫자를 저장하더라도 문자로만 저장이 되며 array, object는 저장이 불가하다. 

    그러나, JSON을 사용한다면 저장이 가능하다. 

 

localStorage.setItem으로 데이터의 저장이 가능하고, getItem으로 불러오기가 가능하다.

또한 사진과 같이 숫자 20으로 저장한 데이터도 문자 '20'으로 저장되어 불러와 진 것을 확인할 수 있다. 

.removeItem(key) 혹은 .clear()로 데이터의 삭제가 가능하다. 

 

 

 

JSON을 사용하여 Array, Object 저장 및 사용하기 

let obj = {name: "kim", age: 20}; 

localStorage.setItem('data', obj);
localStorage.setItem('data2', JSON.stringify(obj));

사진과 같이, 그냥 obj를 localStorage에 저장하면 Object가 깨져서 저장이 되기 때문에 JSON.stringify함수를 사용하여 변환을 한 다음 저장하여야 한다. 

 

let local = localStorage.getItem('data2');

console.log("1: ", local);
console.log("2: ", JSON.parse(local));

데이터를 불러올 때도 마찬가지로 그냥 불러오면 저장했던 문자열 그대로 가져와지기 때문에 JSON문자열을 복호하는 JSON.parse()함수를 사용하여 불러와야 한다.