✅ LocalStorage 란?
localStorage를 사용하면, 브라우저에 Key-Value 값을 Storage에 저장할 수 있다.
브라우저 상에서 개발자 도구(F12)를 통해 보면 아래와 같이 보여진다.
✅ LocalStorage 사용법
- setItem(key, value) - key, value 값 추가
- getItem(key) - value 읽어 오기
- removeItem(key) - item 삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 개수
- key() - index로 key값 찾기
📌 setItem(key, value)
localStorage.setItem("data_first", data);
setItem 메서드를 통해 key는 data_first, value는 data로 들어간다. 하지만, value를 조회하면 [Object Object]로 나오는데 이는 Storage에 저장된 데이터는 모두 문자열만 사용 가능하여 value인 data를 문자여롤 변환해 주어야 한다.
👉 Storage에 저장된 값은 반드시 문자열로 저장됨 때문에 아래와 같이 변환 과정이 필요하다.
localStorage.setItem("data_first", JSON.stringify(data));
JSON.stringify | 객체를 문자열로 |
JSON.parse | 문자열을 객체로 |
주의할 점은 setItem()을 해주면 value가 배열처럼 쌓이는게 아니라 새로 넣어준 값으로 대체된다.
배열을 만들어 값을 넣어주면 첫번째 배열 값만 바뀌기 때문에 const arr = []와 같이 선언해주는 것이 아니라 이전 value 값들을 받아오고 그 배열에 넣어주는 작업이 필요하다
const AddData = () => {
//localStorage에 key: data_first, value: data가 있으면 불러오고 없으면 [] 빈 배열을 생성
const dataArr = JSON.parse(localStorage.getItem("data_first") || [];
dataArr.push(data) //dataArr에 data를 추가
localStorage.setItem("data_first", JSON.stringify(dataArr));
}
👉 data_first의 value에 데이터가 쌓인다.
📌 getItem(key)
JSON.parse(localStorage.getItem("data_first));
👉 localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용한다.
//setItem
window.localStorage.setItem("name", "mien");
window.localStorage.setItem("age", "20");
//getItem
const name = window.localStorage.getItem("name");
const age = window.localStorage.getItem("age");
//결과 출력
document.write(name) //mien
document.write(age) //20
📌 removeItem(key)
window.localStorage.removeItem('name');과 같이 removeItem() 함수를 사용하여 key값이 'name'인 아이템을 삭제할 수 있다.
📌clear()
window.localStorage.clear();과 같이 도메인의 모든 아이템을 삭제할 수 있다.
📌length()
window.localStorage.length(); -> localStorage에 저장된 값의 개수를 확인하기 위해서 length 속성을 사용.
📌key() -> window.localStorage.key();
//setItem
window.localStorage.setItem('name', 'mien');
window.localStorage.setItem('age', '20');
//key
const key_first = window.localStorage.key(0);
const key_second = window.localStorage.key(1);
//결과출력
document.write(key_first); //age
document.write(key_second); //name
key() 함수의 파라미터로 index를 전달하여 해당 index의 key값을 조회한다.
'Language > JavaScript' 카테고리의 다른 글
[JavaScript] 객체 메소드 (0) | 2023.12.14 |
---|---|
정규표현식(Regular Expression) (0) | 2023.12.12 |
브라우저 이벤트(Event) (0) | 2023.12.04 |
프로토타입(Prototype) (0) | 2023.09.09 |
Class(생성자 함수, 객체 생성 방식) (0) | 2023.09.02 |