"Key값을 입력받는 칸을 만들고 그 옆에 키값과 한쌍인 데이터 넣는 칸을 만들자.
그리구 그렇게 입력받은 데이터를 아래 필드셋에 정렬하고 데이터들을 세션스토리지에 저장해보는거야.
그렇게 저장된 데이터들을 삭제도 하고 새로운 탭에서도 확인할 수 있게 만들어보자!"
의 결과.....
↓↓↓↓↓↓↓↓↓↓↓↓↓
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!-- 2개의 문자열 입력받는 도구와 버튼 3개 -->
key<input type="text" id="keyinput" /> value<input
type="text"
id="valueinput"
/>
<input type="button" value="추가" id="insertbtn" />
<input type="button" value="삭제" id="removebtn" />
<input
type="button"
value="새창으로보기"
id="
windowaddbtn"
/>
<!-- 데이터 출력 영역 -->
<fieldset>
<legend>데이터 출력 영역</legend>
<select id="list" size="10"></select>
</fieldset>
<script>
let keyinput = document.getElementById("keyinput");
let valueinput = document.getElementById("valueinput");
let insertbtn = document.getElementById("insertbtn");
let removebtn = document.getElementById("removebtn");
let windowaddbtn = document.getElementById("windowaddbtn");
let list = document.getElementById("list");
//세션 스토리지의 내용을 읽어서 리스트에 출력하는 함수
//처음 접속할 때 그리고 삽입이나 삭제를 할 때
//매번 데이터를 다시 출력하는데 코드를 여러번 작성하지 않기 위해서
const showData = () => {
//showData() 함수는 내용을 조작하지 않고 단지 보여주는 역할만 함
list.innerHTML = "";
//리스트 내용 초기화
//세션 스토리지 하나씩 순회하면서 읽기
for (let i = 0; i < sessionStorage.length; i++) {
let temp = sessionStorage.key(i);
//select에 옵션을 추가
//앞에 내용이 보여지는 내용이고 뒤의것이 이름
list.options[list.options.length] = new Option(
temp + ":" + sessionStorage[temp],
temp
);
}
};
//윈도우가 모든 데이터를 로드한 후!
window.addEventListener("load", () => {
showData();
});
//삽입버튼 눌렀을때
insertbtn.addEventListener("click", () => {
//세션 스토리지에 저장 (약간 이해가 안간다. 키값이 밸류값이라니? 저 대괄호는 무엇인가?)
sessionStorage[keyinput.value] = valueinput.value;
showData();
});
//list를 클릭했을 때 클릭한 데이터를 input에 출력
list.addEventListener("click", () => {
let selecteddata = list.options[list.selectedIndex];
keyinput.value = selecteddata.value;
valueinput.value = sessionStorage[selecteddata.value];
});
//삭제 버튼을 눌렀을 때 선택된 데이터 삭제
removebtn.addEventListener("click", () => {
delete sessionStorage[keyinput.value];
showData();
});
windowaddbtn.addEventListener("click", () => {
//새창에서 열면 세션은 현재 내용을 복제해서 생성됨
window.open(
location.href
//띠용 이거 왜 안들어가지냐 근데 어케하는 지 모르겟음 집에갈뢰.
);
});
</script>
</body>
</html>
|
cs |
Location.href 왜 서버 에러 뜨는 지 의문이군. 낼 강사님께 여쭤봐야지 촤하하
'카카오 클라우드 스쿨' 카테고리의 다른 글
| [node.js] Require 함수 (0) | 2022.11.16 |
|---|---|
| [node.js] 단방향 암호화 (0) | 2022.11.16 |
| [HTML5]WEB Storage - Session Storage & Local Storage (0) | 2022.11.15 |
| [GIT] repository에 수정파일 업데이트 하는 방법 (0) | 2022.11.15 |
| 인피니트 스크롤 (0) | 2022.11.14 |
