JongDDA의 한걸음 한걸음씩
[JavaScript] 로컬스토리지(local storage) 본문
728x90
자바스크립트 코드가 실행될 때 사용된 값의 생명주기!
=> 자바스크립트 변수는 프로그램이 실행되는 기간에만 존재한다.
=> 프로그램이 실행될 때 아니면, 접근할 수 없는 데이터이다!
영구적으로 값이 저장되는 메모리 공간(비휘발성 메모리)
=> 브라우저에서는 비휘발성 메모리 공간인 '로컬스토리지'를 제공!
로컬스토리지
- 브라우저 안에 저장되는 데이터들을 모아놓은 공간 중 하나
- 비휘발성이며, 값이 만료되지 않는다.
- 사용자가 값을 삭제할 수는 있다.
- 키와 밸류의 형태로 값을 저장한다.(JSON 형태)
=> JavaScript Object Notation
- 키와 밸류는 문자열 형태로 입력된다.
로컬스토리지에 접근하는 방법
window.localStorage.메소드 (BOM)
로컬스토리지 기능들(메소드)
- 로컬스토리지.setItem("키","밸류") : 저장
- 로컬스토리지.getItem("키") : 이 키를 가진 값을 반환
- 로컬스토리지.removeItem("키") : 이 키를 가진 값을 삭제
- 로컬스토리지.clear() : 모두 삭제
연습문제) 웹 문서에 이력한 정보를 로컬스토리지에 저장해보자!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트</title>
<style>
</style>
</head>
<body>
<div id="container">
<input id ="animal" type="text" placeholder="좋아하는 동물"><br>
<input id="ani-name" type="text" placeholder="이름을 지어주세요"><br><br>
<button>추가</button>
</div>
<script src="01_script.js">
</script>
</body>
</html>/*
웹 문서에 이력한 정보를 로컬스토리지에 저장해보자!
*/
const button = document.querySelector("button")
const animalInput = document.querySelector("#animal")
const nameInput = document.querySelector("#ani-name")
button.onclick = function(){
console.log(`동물 : ${animalInput.value}, 이름 : ${nameInput.value}`)
let animal = animalInput.value
let aniName = nameInput.value
// 객체는 키의 중복을 허용하지 않는다
// 따라서 키가 중복되면,하나 빼고 다 사라짐
// localStorage.setItem(animal,aniName)
//console.log(localStorage.getItem("악어"))
if(localStorage.getItem(animal)==null){
localStorage.setItem(animal,aniName)
}else{
alert(`이미 ${animal}은 있어요`)
}
}
배열을 로컬스토리지에 저장
// 배열을 로컬스토리지에 저장하고 싶다!
const todo = ["치킨먹기", "콜라먹기", "무 먹기"]
/*
for(let i= 0;i<todo.length;i++){
localStorage.setItem(`food${i}`,todo[i])
}
*/
// 배열을 문자열 형태로 변환해주는 메소드
// JSON : 자바스크립트 객체 표현법을 객체화한 것으로, 관련 기능 제공
const todoString = JSON.stringify(todo)
console.log(todoString)
localStorage.setItem("todo", todoString)
// 배열을 로컬스토리지에서 읽어오자!
console.log(localStorage.getItem("todo"))
// 문자열로 집어넣은 값을 원래 자료형으로 해석해주자!
const result = localStorage.getItem("todo")
console.log(JSON.parse(result))
728x90
반응형
'개발 > 프론트엔드' 카테고리의 다른 글
| [JavaScript & Jquery] 선택자 (0) | 2021.04.04 |
|---|---|
| [Jquery] 제이쿼리란, 제이쿼리 연동하기 (0) | 2021.04.01 |
| [JavaScript] 템플릿 문자열 (0) | 2021.03.28 |
| [JavaScript] const 와 let (0) | 2021.03.28 |
| [JavaScript] DOM 요소의 dataset 속성 (0) | 2021.03.26 |
'개발/프론트엔드' Related Articles
more
Comments