로컬스토리지?
velog의 테마를 보자, 라이트 / 다크 모드를 전환시키고, 이는 우리들의 눈 건강에 제법 중요한 역할도하지만 사실 얼마든지 바꿀 수 있으니 계정 비밀번호같은거와 비교하면 그렇게 중요하지는 않다.
로컬 스토리지는 이런 임시데이터를 모아두는 곳이다.
당장 f12를 눌러 애플리케이션에 들어가면 로컬 스토리지를 볼 수 있다.
cookie?
- 유저로그인 (서버 세션 등)
- 이용자 통계 (구글 애널리틱스 등)
- 임시데이터 (장바구니 등)
- 광고 활용 (비로그인 방문자 판별)
쿠키와 로컬 스토리지의 차이?
쿠키
- 서버에서 통신으로 삽입 가능
- 데이터요청시 자동으로 서버로 전송
- 브라우저가 꺼지면 삭제되도록 설정 가능
- 해커가 탈취하지 못하도록 js로 탈취 불가로 설정 가능.
로컬 스토리지
- js로만 삽입 가능
- 서버로 데이터 전송되지 않음
- 브라우저가 꺼져도 유지됨
- 해커가 js로 쉽게 탈취가능
https://docs.google.com/presentation/d/1TLHerz9gNWCYxH4NeH5v9y5faMbvmHX-LWXFCPsWAPA/edit?usp=sharing
json이 맞는지 아닌지 테스트하는 사이트
https://jsonplaceholder.typicode.com/
https://jsonplaceholder.typicode.com/posts/1
<script>
//로컬 스토리지 데이터 저장
// localStorage.setItem("theme", light);
//일종의 이미 완성된것이라 localStorage 로 한다.
//setItem은 프로퍼티를 변경시킨다.
//key value가 필요하다
//key value 모두 문자열이어야만 한다
//(객체 사용 불가)
const obj = {
name: "홍길동",
age: 12,
};
// json? 자바스크립트 객체 형태의 문자열
// 자바스크립트 객체 형태의 문자열
const objJson = JSON.stringify(obj);
// "{\"name\":\"홍길동\",\"age\":12}"
localStorage.setItem("theme", objJson);
const resultJson = localStorage.getItem("theme");
//console.log(resultJson);
//alert(resultJson);
const result = JSON.parse(resultJson);
console.log(result);
</script>fetch, then(), then()
받아오는 json내용 자바스크립트 내용으로 바꾸는 통신용메서드다.
fetch와 then()을 왜 같이 사용하는지에 대해선 나도 제법 궁금하지만,
교수님의 답변은 그냥 그렇게 정해져있는것이라고 한다.
then() 안에는 한개 이상의 변수가 필요하며,
response 와 result는 그저 쉬운 구분을 위해서 그렇게 변수명을 지은것이지 다른것으로 해도 된다.
<script>
// 통신용 메소드
// 윈도우메서드이나 window. 는 생략가능
// 패치함수를 사용하면
// 뒤에 then catch finally를 선택해서 입력
// then catch finally는 콜백함수를 매개 변수로 받는다.
fetch("https://jsonplaceholder.typicode.com/posts/1")
//json()을 사용하면 응답 내용에서 json데이터를 자바스크립트 객체로 바꿔준다.
//json데이터를 받는 주소이면 .then((response) => response.json())코드 고정
.then((response) => {
console.log(response)
return response.json()
})
.then((result) => {
console.log(result);
document.querySelector('#first').innerHTML = result;
});
</script>외부의 json을 자바스크립트 데이터로 만들어보는 실습
랜덤한 페이지를 들어가서 그 json을 출력해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="getData()">랜덤</button>
<h1 id="first"></h1>
<script>
//버튼을 누르면 getData 함수 실행
//id가 first인 태그에 title을 넣기
//1~100번의 랜덤한 post가져와서 사용
//비동기 통신이라 한다:
//언제 들어올지 모르는 데이터를 다룰 때 사용, 순차적 실행이 아닌
//결과가 들어오면 실행되도록 되어있음.
const getData = () => {
const randomNum = Math.floor(Math.random() * 100);
fetch("https://jsonplaceholder.typicode.com/posts/"+randomNum)
.then((response) => response.json())
.then((result) => {
console.log(result);
// F12로 보는 콘솔 결과에서 나온값중 "타이틀"을 넣자.
document.querySelector("#first").innerHTML = "제목: "+ result.title;
console.log("fetch함수 내부");
});
console.log("fetch함수 이후");
}
</script>
</body>
</html>그 데이터를 배열형태로 ul안에 넣어보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="titleList">
</ul>
<script>
document.querySelector("#titleList");
document.write(as);
//forEach 또는 for 써서 titleList에 제목 li 넣기.
fetch("https://jsonplaceholder.typicode.com/posts")
.then((r)=> r.json())
.then((result) => {
for (let i = 0; i<result.length; i++){
document.querySelector('#titleList').insertAdjacentHTML(
"beforeend",
`<li>${result[i].title}</li>`
);
}
});
</script>
</body>
</html>위를 foreach로 한 것.
<body>
<ul id="titleList">
</ul>
<script>
document.querySelector("#titleList");
document.write(as);
//forEach 또는 for 써서 titleList에 제목 li 넣기.
fetch("https://jsonplaceholder.typicode.com/posts")
.then((r)=> r.json())
.then((result) => {
result.forEach((value) => {
document.querySelector("#titleList").insertAdjacentHTML("beforeend",`<li>${value.title}</li>`);
})
});
</script>
</body>
</html>