localStorage
localStorage는 브라우저에 key-value 값을 Storage에 저장하고 섹션이 바뀌어도 저장한 데이터는 유지될 수 있는 기능이다.
오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
브라우저나 OS가 재시작히더라도 데이터가 파기되지 않습니다.
- setItem() - key, value 추가
- getItem() - value 읽어오기
- removeItem() - item삭제
- clear() - 도메인 내의 localStorage 값 삭제
- length - 전체 item 갯수
- key() - index로 key값 찾기
ex)
localStorage.setItem('test', 1);alert(localStorage.getItem('test')) //1localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.
setItem()
localalStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용한다.
window.localStorage.setItem(key, value)
<body>
<section class="localStorage">
<h2>localStorage</h2>
<input type="text" />
<button class="btnSave">저장</button>
<button class="btnRead">불러오기</button>
</section>
<script>
const section = document.querySelector(".localStorage"); //부모 요소 가져오기
const btnRead = section.querySelector(".btnRead"); // 버튼 요소 가져오기
const btnSave = section.querySelector(".btnSave"); // 버튼 요소 가져오기
const input = section.querySelector("input"); //텍스트 입력 요소
// 저장하기 버튼 클릭 시
btnSave.addEventListener("click", () => {
//텍스트 입력 박스의 문자열 가져오기
const data = input.value;
//localStorage에 저장
localStorage.setItem("mykey", data);
});
//불러오기 버튼 클릭시
btnRead.addEventListener("click", () => {
//localStorage에서 불러오기
const data = localStorage.getItem("mykey");
//텍스트 입력 박스에 문자열 대입
input.value = data;
});
</script>
</body>getItem()
localalStorage에 아이템을 읽기 위해서는 getItem() 함수를 사용한다.
window.localStorage.getItem(key)JSON.srtringify로 문자열로 만든 후 , parse로 파싱을 해보겠다
let key = "야호"
let value = [{id:1, name: "홍길동"}, {id:2, name: "신나"}];
localStorage.setItem(key, JSON.stringify([...value]));
let item = JSON.parse(localStorage.getItem(key));
console.log(item);
// ▼(2)[{...},{...}]
// 0: {id: 1, name: '홍길동'}
// 1: {id: 2, name: '신나'}
// length: 2
'블록체인 sw개발자' 카테고리의 다른 글
| [JS] 원시타입과 참조타입 (0) | 2023.08.03 |
|---|---|
| 게시판 CRUD 개념 (0) | 2023.07.28 |
| 정규표현식이란 (0) | 2023.07.21 |
| [JS] 정렬 (0) | 2023.07.20 |
| [JS]알고리즘(Algorithm) (0) | 2023.07.19 |
