window.localStorage.setItem(key, value)
localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용합니다.
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에 저장된 값을 읽어왔습니다.
<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에 저장하였습니다.
<script>
window.localStorage.removeItem(key);
</script>
localStorage의 도메인의 모든 아이템을 삭제하였습니다.
<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 값을 조회하였습니다.