[🍦] localStorage

📍localStorage란?

• 서버에 저장할 정도로 중요하진 않은 정보를 저장하기 위해 사용
• 중요하진 않은 정보란 정보가 날라가도 상관은 없지만 있으면 편리한 정보
  ex) “오늘 그만 보기” 버튼 클릭 여부
• DB를 사용하지 않기 때문에 연습용으로 로컬스토리지에 저장, 삭제하는 연습

 

📍localStorage 다양한 사용법

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

localStorage.setItem("상품명", "멋있는 셔츠")

 

 

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

localStorage.getItem("상품명")
// "멋있는 셔츠"

 

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

localStorage.removeItem("상품명")

 

 

 

📍로컬스토리지의 문제점

1. 저장 및 불러오기 시 데이터가 문자열로만 저장된다.

 

2. Array, Object를 저장하려면 데이터가 이상해진다.

 

📌해결 방법 : JSON.Stringify() 후 로컬스토리지에 저장,

로컬스토리지에서 데이터 가져온 후에는 JSON.parse() 해야 한다.

// 데이터 저장 시 JSON.stringify()를 해줘야 함
localStorage.setItem("키", JSON.stringify({ name: "병수", age: 30 }));

// 데이터 가져온 후 JSON.parse() 해줘야 함
localStorage.getItem("키"); // 로컬스토리지에서 가져온 문자열 데이터
// '{"name":"병수","age":30}'

JSON.parse(localStorage.getItem("키")); // 자바스크립트 객체로 변경된 데이터
// {"name":"병수","age":30}

 

 

📍응용 문제 풀어보기

 

문제 1.

아래의 쇼핑몰 데이터를 로컬스토리지에 넣어주기

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

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

 

다음 상품을 상품리스트(products)에 추가하기

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

 

결과 예시

📌해설 및 정답

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

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

 

 

문제 2.

id가 1인 상품의 가격을 35000원으로 변경 후 다시 로컬스토리지에 저장하기

📌해설 및 정답

1. id가 1인 데이터가 있는 경우를 찾아, 나머지는 그대로 두고 가격만 변경한다.
2. 그렇지 않은 경우는 그대로 둔다.

const 현재상품들 = JSON.parse(localStorage.getItem("products"));

let newProducts = 현재상품들.map((product) => {
    if (product.id === 1) {
        return {
            id: product.id,
						brand: product.brand,
						name: product.name,
            price: 35000, // 얘만 변경
        }
    } else {
        return product;
    }
});

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

 

• 리팩토링 1) spread operator를 활용한다.

const 현재상품들 = JSON.parse(localStorage.getItem("products"));

let newProducts = 현재상품들.map((product) => {
    if (product.id === 1) {
        return {
						...product,
            price: 35000, // 얘만 변경
        }
    } else {
        return product
    }
});

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

 

• 리팩토링 2) return이 종료가 된다는 것을 활용하여 더 간단하게 코드를 짠다.

const 현재상품들 = JSON.parse(localStorage.getItem("products"));

let newProducts = parsed.map((product) => {
    if (product.id === 1) {
        return {
						...product,
            price: 35000, // 얘만 변경
        }
    }
    return product; // else 안써도 됨
});

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

 

문제 3.

id가 1인 상품 삭제하고 다시 로컬스토리지에 저장하기

 

결과 예시

📌정답

let 상품들 = JSON.parse(localStorage.getItem("products"));
let 필터링된_상품들 = 상품들.filter((상품) => 상품.id !== 1)

localStorage.setItem("products", JSON.stringify(필터링된_상품들))