<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>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
위와 같은 html 에서
번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고
삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고
페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면
위의 input 요소에 출력되도록 해 보시오.
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. 배열에 누적 시키기
// 빈 배열을 준비하고
let members = [];
// 만일 localStorage 에 이미 저장된 정보가 있다면
if (localStorage.members) {
// localStorage 에 저장된 정보를 이용해서 배열을 만든다.
members = JSON.parse(localStorage.members)
}
members.push(obj);
// 4. 배열을 json 문자열로 변환
const json = JSON.stringify(members);
// 5. json 문자열을 localStorage 에 저장
localStorage.members = json;
// 6. localStorage 에 저장된 json 문자열을 이용해서 table 에 출력하기
printMembers();
});
저장 버튼을 클릭 동작을 했을때의 코드이다.
// 페이지 로딩 시점에 이미 저장된 회원정보가 있다면 한번 출력해 준다.
if (localStorage.members) {
printMembers();
}
function printMembers(){
// tbody 안에 있는 내용 삭제
document.querySelector("tbody").innerText="";
// localStrorage 에 저장된 문자열을 배열로 변환
const members = JSON.parse(localStorage.members);
// 반복문 돌면서 tbody 에 tr 을 출력하기
for (let i=0; i<members.length; i++) {
let tmp = members[i];
const tr = `
<tr>
<td>${tmp.num}</td>
<td>${tmp.name}</td>
<td>${tmp.addr}</td>
<td>
<a href="javascript:deleteItem(${i})">삭제</a>
</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
}
}
페이지 로딩 시점과 localStorage.members 의 내용을 출력시켜주는 함수를 생성하고 사용하였다.
document.querySelector("#deleteBtn").addEventListener("click", ()=>{
// localStorage 에 있는 member 삭제
delete localStorage.members;
// 이미 출력된 내용 삭제
document.querySelector("tbody").innerText="";
});
삭제 버튼을 클릭 동작을 했을 때의 코드이다.
// 특정 아이템을 삭제하는 함수
function deleteItem(index) {
// 삭제할 아이템의 index가 있으면 삭제 가능
// localStorage 에 저장된 내용을 이용해서 배열을 만들고
const members = JSON.parse(localStorage.members);
// 해당 배열에서 index 를 이용해서 삭제하고
members.splice(index, 1);
// localStorage 에 json 문자열로 다시 저장한후
localStorage.members=JSON.stringify(members);
// 출력
printMembers();
}
특정 아이템을 삭제 하는 코드이다.
<!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_example5.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>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStorage에 저장하고
// 삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고
// 페이지 로딩 시점에 localStorage 에 저장된 번호, 이름, 주소가 있다면
// 위의 input 요소에 출력되도록 해 보시오.
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. 배열에 누적 시키기
// 빈 배열을 준비하고
let members = [];
// 만일 localStorage 에 이미 저장된 정보가 있다면
if (localStorage.members) {
// localStorage 에 저장된 정보를 이용해서 배열을 만든다.
members = JSON.parse(localStorage.members)
}
members.push(obj);
// 4. 배열을 json 문자열로 변환
const json = JSON.stringify(members);
// 5. json 문자열을 localStorage 에 저장
localStorage.members = json;
// 6. localStorage 에 저장된 json 문자열을 이용해서 table 에 출력하기
printMembers();
});
// 페이지 로딩 시점에 이미 저장된 회원정보가 있다면 한번 출력해 준다.
if (localStorage.members) {
printMembers();
}
function printMembers(){
// tbody 안에 있는 내용 삭제
document.querySelector("tbody").innerText="";
// localStrorage 에 저장된 문자열을 배열로 변환
const members = JSON.parse(localStorage.members);
// 반복문 돌면서 tbody 에 tr 을 출력하기
for (let i=0; i<members.length; i++) {
let tmp = members[i];
const tr = `
<tr>
<td>${tmp.num}</td>
<td>${tmp.name}</td>
<td>${tmp.addr}</td>
<td>
<a href="javascript:deleteItem(${i})">삭제</a>
</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
}
}
// 특정 아이템을 삭제하는 함수
function deleteItem(index) {
// 삭제할 아이템의 index가 있으면 삭제 가능
// localStorage 에 저장된 내용을 이용해서 배열을 만들고
const members = JSON.parse(localStorage.members);
// 해당 배열에서 index 를 이용해서 삭제하고
members.splice(index, 1);
// localStorage 에 json 문자열로 다시 저장한후
localStorage.members=JSON.stringify(members);
// 출력
printMembers();
}
document.querySelector("#deleteBtn").addEventListener("click", ()=>{
// localStorage 에 있는 member 삭제
delete localStorage.members;
// 이미 출력된 내용 삭제
document.querySelector("tbody").innerText="";
});
</script>
</body>
</html>
전체 코드 내용이다.
값을 입력하고 저장 버튼을 누르면 해당 값이 table에 추가되어 나타난다
특정 행의 값을 삭제하고 싶을땐 테이블 우측에 삭제 링크를 클릭하면 된다.
첫번째 행 삭제
삭제 버튼을 누르면 저장된 내용이 모두 삭제된다.
모두 삭제된 상태
'JavaScript' 카테고리의 다른 글
| Bootstrap Modal 디자인 및 동작 (0) | 2023.06.13 |
|---|---|
| JavaScript 정규표현식 특징 (1) | 2023.06.01 |
| JavaScript localStorage 활용 예제 (2) (0) | 2023.05.19 |
| JavaScript localStorage 활용 예제 (0) | 2023.05.18 |
| JavaScript JSON 활용 예제 (0) | 2023.05.17 |
