☑️ localStorage 공부하기
const users = JSON.parse(localStorage.getItem("users") || "[]");
users.push(newUser);
localStorage.setItem("users", JSON. stringify(users));
📌 push는 배열 전용 메서드
: JavaScript에서 배열에 새로운 요소를 끝에 추가할 때 사용하는 메서드
웹 개발에서 localStorage와 push를 함께 사용하는 건 배열 형태의 데이터를 저장하고 갱신할 때 자주 쓰인다.
push를 보고 stack 자료구조와 관련이 있는지 찾아보았는데, push는 stack의 삽입 동작과 같지만 배열 자체는 스택이 아니라 유연한 자료구조라고 한다.
즉 stack의 일부 동작을 흉내내지만, 웹 개발에서는 무조건 스택으로 쓰진 않고, 그냥 데이터를 쌓을 때 편하게 쓰는 경우가 많다고한다.
users는 localStorage에서 가져온 사용자 배열임
처음에는 []로 초기화될 수 있다
newUser는 새로 추가하고 싶은 사용자 데이터
⭐push를 쓰면 이 newUser가 users 배열의 가장 마지막에 추가
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4] 배열의 끝에 4가 추가
즉, push는 기존 배열을 바꾸고(즉, 원본 수정), 새로 들어간 요소 다음에 배열의 길이도 반환한다
let len = arr.push(5); // arr는 [1,2,3,4,5], len은 5
✔️ 웹 개발에서 localStorage와 push를 함께 사용하는 경우
✅ 예시 1: 장바구니에 상품 추가하기
: localStorage에 있는 장바구니 배열에 새 상품을 추가하는 방식
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
const newItem = { id: 101, name: "티셔츠", price: 29000 };
cart.push(newItem);
localStorage.setItem("cart", JSON.stringify(cart));
✅ 예시 2: 최근 검색어 저장하기
검색어를 누적 저장하면서도 오래된 건 지우는 방식. push랑 shift 조합이 자주 쓰임.
const recentSearches = JSON.parse(localStorage.getItem("searches") || "[]");
const keyword = "자바스크립트 배열";
recentSearches.push(keyword);
// 최근 5개까지만 저장
if (recentSearches.length > 5) {
recentSearches.shift(); // 가장 오래된 검색어 제거
}
localStorage.setItem("searches", JSON.stringify(recentSearches));
✅ 예시 3: 사용자 활동 로그 기록
: 유저가 뭔가 할 때마다 기록을 저장할 수 있음. 추후 분석이나 디버깅에 활용 가능.
localStorage에서 배열을 꺼내서 push로 추가하고, 다시 setItem으로 저장하는 패턴은 거의 템플릿처럼 반복해서 쓰는 기본 로직이므로 잘 알아두자
