LocalStorage

localStorage란?

- 브라우저 내에 임시로 데이터(key-value)를 저장할 수 있게 함.

- 네트워크 요청 시 서버로 전송되지 않음

➔ 서버로 전송되는 쿠키보다 더 많은 자료를 보관할 수 있음.

➔ 서버에 저장할 정도로 중요하진 않은 정보(정보가 날아가도 상관은 없지만 있으면 편리한 정보)를 저장

ex) “오늘 그만 보기” 버튼 클릭 여부

 

 

로컬스토리지에 데이터 추가하기 or 수정하기

localStorage.setItem("상품명", "화이트 셔츠")

* 데이터 확인 : 개발자도구 ➔ Application ➔ Storage ➔ Local Storage

 

 

로컬스토리지에서 데이터 가져오기

localStorage.getItem("상품명")
// "화이트 셔츠"

 

 

로컬스토리지의 데이터 삭제하기

localStorage.removeItem("상품명")

 

 

---

 

 

로컬스토리지의 문제점

- 저장 및 불러오기 시 데이터가 문자열로만 저장됨 : 숫자, Array, Object를 사용하면 문자열로 자동 변환됨.

ex) 객체를 저장했을 때 : localStorage.setItem("키", { name: "병수", age: 30 });

localStorage.getItem("키") 를 하면 '[object Object]'로 호출된다.

 

➔ 데이터를 저장할 때 JSON.stringify()로 저장

// 데이터 저장 시 JSON.stringify()를 해줘야 함
localStorage.setItem("key", JSON.stringify({ name: "sam", age: 40 }));

 

➔ 데이터를 가져올 때에는 JSON.parse()로 읽기

// 데이터 가져온 후 JSON.parse() 해줘야 함

localStorage.getItem("key"); // 로컬스토리지에서 바로 가져온 문자열 데이터
// '{"name":"sam","age":40}'

JSON.parse(localStorage.getItem("key")); // 자바스크립트 객체로 parse하여 가져온 데이터 
// {name: 'sam', age: 40}

 

 

---

 

 

데이터 추가하기

 

기존 데이터 저장

const products = [
  {
    id: 1,
    brand: "아디다스",
    name: "멋진 아디다스 반팔티",
    price: 32000,
  },
  {
    id: 2,
    brand: "나이키",
    name: "멋진 나이키 바지",
    price: 30000,
  },
];

localStorage.setItem("products", JSON.stringify(products))

 

새로운 데이터 추가

// 1. 기존 데이터를 가져온다.
// 2. 기존 데이터와 새로운 데이터를 합친 새로운 배열을 만든다
// 3. 로컬스토리지에 다시 넣는다.

const newProduct = {
  id: 3,
  brand: "뉴발",
  name: "멋진 뉴발 신발",
  price: 78000,
};

const products = JSON.parse(localStorage.getItem("products"));
localStorage.setItem("products", JSON.stringify([...products, newProduct]))