[Javascript] LocalStorage

✅ 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값을 조회한다.