데이터 저장 localStorage

localStorage.setItem()

key, value 추가

window.localStorage.setItem(key, value)

localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용합니다.

localStorage.getItem()

value 읽어 오기

window.localStorage.getItem(key)

localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용합니다.

예시사용

<script>
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20');

// getItem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');

// 결과 출력
document.write(name); // anna
document.write('<br/>');
document.write(age);  // 20
</script>

setItem() 함수를 사용하여 localStorage에 key-value 를 저장합니다.
localStorage에는 문자열만을 저장할 수 있습니다.
따라서, 20을 숫자로 저장하더라도, 문자열로 저장됩니다.
getItem() 함수에 key를 전달하여 localStorage에 저장된 값을 읽어왔습니다.

localStorage에 객체, 배열 저장하기

<script>
// localStorage에 저장할 객체
const obj = {  name : 'anna',  age : 20}

// localStorage에 저장할 배열
const arr = [1, 2, 3];

// 객체, 배열을 JSON 문자열로 변환
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);

// setItem
window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString);

// getItem
const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums');

// JSON 문자열을 객체, 배열로 변환
const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString);

// 결과 출력
document.write(personString); // {"name":"anna","age":20}
document.write('<br/>');
document.write(personObj); // [object Object]
document.write('<br/>');

document.write(numsString); // [1,2,3]
document.write('<br/>');
document.write(numsArr); // 1,2,3
document.write('<br/>');
</script>

localStorage 에는 문자열만 저장됩니다.
따라서, localStorage에 객체나 배열를 저장하기 위해서는 객체를 문자열로 변환해서 저장해야 합니다.여기서는 JSON.stringify() 함수를 사용하여 객체와 배열을 JSON 문자열로 변환하였습니다. 그리고 JSON 문자열을 localStorage에 저장하였습니다.

---

localStorage.removeItem()

item 삭제

<script>
window.localStorage.removeItem(key);
</script>

localStorage.clear()

도메인 내의 localStorage 값 삭제

localStorage의 도메인의 모든 아이템을 삭제하였습니다.

localStorage.length ()

전체 item 갯수

localStorage.key()

index로 key값 찾기

<script>
window.localStorage.setItem('name', 'anna')
window.localStorage.setItem('age', '20');

// key
const key_1 = window.localStorage.key(0);
const key_2 = window.localStorage.key(1);

// 결과 출력
document.write(key_1); // name
document.write(key_2); // age
</script>

key 함수의 파라미터로 index를 전달하여
해당 index의 key 값을 조회하였습니다.

💡더 자세히 알고 싶다면~?