데이터 저장 localStorage

김종민·2024년 11월 14일
0

js

목록 보기
22/25
post-thumbnail

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 값을 조회하였습니다.

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

profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보