localStorage에는 문자열만 저장가능하다.
여러 항목을 배열에 담아 JSON 형식이나 문자열로 출력해보는 코드 작업을 해보았다.
<!DOCTYPE html>
<html lang="en">
<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>Step10_example4.html</title>
</head>
<body>
<input type="text" placeholder="번호입력..." id ="inputNum">
<br>
<input type="text" placeholder="이름입력..." id ="inputName">
<br>
<input type="text" placeholder="주소입력..." id ="inputAddr">
<br>
<button id = "saveBtn">저장</button>
<button id = "deleteBtn">삭제</button>
<script>
//번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStroage 에 저장하고
//삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고
document.querySelector("#saveBtn").addEventListener("click", ()=>{
//1. 입력한 내용을 읽어와서
const num = Number(document.querySelector("#inputNum").value);
const name = document.querySelector("#inputName").value;
const addr = document.querySelector("#inputAddr").value;
//2. object에 담고
const obj = {num, name, addr };
//3. object를 json 문자열로 만들어서
const jason = JSON.stringify(obj);
//4. localStorage에 저장
localStorage.savedMember = jason;
});
//페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면
//위의 input요소에 출력되도록 해 보세요.
</script>
</body>
</html>javascript에서는 java와 달리 if문에 boolean 타입이 아닌 다른 데이터타입도 적용이 가능하다.
if문 ( )에 값이 들어가 있으면 true로 판정을 해준다. 그 외에 숫자 0 이나 ' '(빈문자열), undefined, null 값을 넣어주게 되면 false로 판정해준다.
package test.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//3.어떤 경로로 요청을 처리할 것인지 경로 설정 (***반드시 /로 시작해야한다!!***)
@WebServlet("/fortune")
public class FortuneServlet extends HttpServlet{//1.HttpServlet 클래스 상속
//2.service() 메소드 오버라이드
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}이 객체는 한번만 최초실행시 생성이되고 (서버가 start된 이후에)나중에는 계속재활용해서 사용한다.
서블릿의 서비스메소드 영역을 만들어주기. 여기에 자바 메소드를 작성이 가능하다.
같은 설정의 코드..jsp로 하면 왼쪽이 훨씬 간결하다. 왼쪽이 jsp 오른쪽이 servlet
jsp에서 for문 써보기..너무 헷갈린다........
'수업내용' 카테고리의 다른 글
| 수업내용 20230523🤦♂️🤦♂️🤦♂️ (0) | 2023.05.24 |
|---|---|
| 20230522 수업내용🥸 (1) | 2023.05.22 |
| 20230518 수업내용🤷♀️🤷♀️🤷♀️ (0) | 2023.05.18 |
| 20230517 수업내용😶🌫️😶🌫️😶🌫️ (0) | 2023.05.17 |
| 20230516 수업내용🤦♂️🤦♂️🤦♂️🤦♂️ (0) | 2023.05.16 |
댓글