일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- input
- table
- Button
- IntelliJ
- 자바
- Visual Studio Code
- list
- 인텔리제이
- Eclipse
- 배열
- 자바스크립트
- CSS
- vscode
- 문자열
- Files
- 이클립스
- javascript
- 이탈리아
- ArrayList
- 테이블
- date
- Maven
- Array
- Java
- string
- js
- windows
- json
- html
- CMD
- Today
- Total
어제 오늘 내일
[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) 본문
이번에는 localStorage 사용법을 정리해보았습니다.
- localStorage란?
- localStorage에 아이템 추가, 읽기
- localStorage에 객체, 배열 저장하기
- localStorage에 값 삭제하기
- localStorage에 값 전체 삭제하기
- localStorage의 아이템 갯수 구하기
- localStorage의 key 이름 찾기
- 전체 key, value 가져오기
localStorage란?
localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.
저장한 데이터는 세션간에 공유됩니다.
즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다.
그럼 이제부터
localStorage를 사용하는 방법을 알아보겠습니다.
- setItem() - key, value 추가
- getItem() - value 읽어 오기
- removeItem() - item 삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 갯수
- key() - index로 key값 찾기
localStorage에 아이템 추가, 읽기
setItem()
localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용합니다.
window.localStorage.setItem(key, value)
getItem()
localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용합니다.
window.localStorage.getItem(key)
// 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
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20');
setItem() 함수를 사용하여 localStorage에 key-value 를 저장합니다.
localStorage에는 문자열만을 저장할 수 있습니다.
따라서, 20을 숫자로 저장하더라도, 문자열로 저장됩니다.
window.localStorage.getItem('name');
window.localStorage.getItem('age');
getItem() 함수에 key를 전달하여
localStorage에 저장된 값을 읽어왔습니다.
localStorage에 객체, 배열 저장하기
// 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/>');
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);
localStorage 에는 문자열만 저장됩니다.
따라서, localStorage에 객체나 배열를 저장하기 위해서는
객체를 문자열로 변환해서 저장해야 합니다.
여기서는 JSON.stringify() 함수를 사용하여
객체와 배열을 JSON 문자열로 변환하였습니다.
window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString);
JSON 문자열을 localStorage에 저장하였습니다.
localStorage에 값 삭제하기
removeItem()
window.localStorage.removeItem(key);
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20');
// removeItem
window.localStorage.removeItem('name');
window.localStorage.removeItem('grade');
// getItem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
// 결과 출력
document.write(name); // null
document.write('<br/>');
document.write(age); // 20
window.localStorage.removeItem('name');
removeItem() 함수를 사용하여
key가 'name'인 아이템을 삭제하였습니다.
window.localStorage.removeItem('grade');
'grade'라는 key는 localStorage에 존재하지 않습니다.
이렇게 removeItem에 존재하지 않는 key를 파라미터로 전달하면,
아무일도 일어나지 않습니다.
localStorage에 값 전체 삭제하기
clear()
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20');
// clear
window.localStorage.clear();
// getItem
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
// 결과 출력
document.write(name); // null
document.write('<br/>');
document.write(age); // null
window.localStorage.clear();
localStorage의 도메인의 모든 아이템을 삭제하였습니다.
localStorage의 아이템 갯수 구하기
length
window.localStorage.length;
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// localStorage item 갯수
const length = window.localStorage.length
// 결과 출력
document.write(length); // 2
const length = window.localStorage.length;
localStorage에 저장된 값의 갯수를 확인하기 위해서
localStorage의 length 속성을 이용하였습니다.
localStorage의 key 이름 찾기
key()
window.localStorage.key(index);
// setItem
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); // age
document.write('<br/>');
document.write(key_2); // name
const key_1 = window.localStorage.key(0);
const key_2 = window.localStorage.key(1);
key() 함수의 파라미터로 index를 전달하여
해당 index의 key 값을 조회하였습니다.
전체 key, value 가져오기
for 문
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// 모든 key, value 출력
// output =>
// age : 20
// name : anna
for(let i = 0; i < window.localStorage.length; i++) {
// key 찾기
const key = window.localStorage.key(i);
// value 찾기
const value = window.localStorage.getItem(key);
// 결과 출력
document.write(key + " : " + value + "<br />");
}
for(let i = 0; i < window.localStorage.length; i++)
length 속성을 사용하여 전체 아이템의 길이를 구하여 for문을 돌렸습니다.
const key = window.localStorage.key(i);
for문의 index 값과 key() 함수를 사용하여 key 이름을 읽어왔습니다.
const value = window.localStorage.getItem(key);
앞에서 찾아온 key값과 getItem() 함수를 이용하여
해당 key의 value를 읽어왔습니다.
for...in
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// 모든 key, value 출력
// output =>
// age : 20
// name : anna
// length : null
// clear : null
// getItem : null
// key : null
// removeItem : null
// setItem : null
for(const key in window.localStorage) {
// value 찾기
const value = window.localStorage.getItem(key);
// 결과 출력
document.write(key + " : " + value + "<br />");
}
for...in 문을 사용하여 localStorage의 key 목록을 조회하였습니다.
그런데 for...in 문을 사용하면,
사용자가 정의한 key 이외에
localStorage의 built-in 항목까지 조회된다는 단점이 있습니다.
for...in 문을 사용하고 싶다면
아래 예제와 같이 코드가 수정되어야 합니다.
built-in propery 제거
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// 모든 key, value 출력
// output =>
// age : 20
// name : anna
for(const key in window.localStorage) {
if(window.localStorage.hasOwnProperty(key)) {
// value 찾기
const value = window.localStorage.getItem(key);
// 결과 출력
document.write(key + " : " + value + "<br />");
}
}
if(window.localStorage.hasOwnProperty(key))
for...in 문에서 조회되는 built-in 항목을 제거하기 위해서
hasOwnProperty() 함수를 사용하였습니다.
Object.keys()
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// key 목록 조회 / 출력
const keys = Object.keys(window.localStorage);
document.write(keys);
document.write('<br/>');
// 모든 key, value 출력
// output =>
// age,name
// age : 20
// name : anna
for(const key of keys) {
// value 찾기
const value = window.localStorage.getItem(key);
// 결과 출력
document.write(key + " : " + value + "<br />");
}
const keys = Object.keys(window.localStorage)
localStorage의 key 목록을 조회하기 위해
Object.keys() 함수를 사용하였습니다.
지금까지 localStorage의 값을 읽고, 쓰고, 지우는 방법을 알아보았습니다.
'IT > Javascript' 카테고리의 다른 글
크롬(Chrome) 에서 localStorage 값 확인하기 (0) | 2022.03.08 |
---|---|
[Javascript] localStorage 만료 시간 설정하기 (0) | 2022.03.07 |
[Javascript] 버튼 클릭 시, 노드 복사/붙여넣기 (0) | 2022.03.06 |
[Javascript] 함수 반복적으로 실행하기, 종료하기 (setInterval(), clearInterval()) (0) | 2022.03.06 |
[Javascript] 객체(object) 내용 출력하기 [object Object] (1) | 2022.03.05 |