localStorage
로컬 스토리지는 로컬에 저장하는 방식으로 쿠키와 세션과는 달리 세션이 끝나더라도 데이터가 지워지지 않는다.
- todolist.html
<!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>todolist</title>
<link rel="stylesheet" href="./todolist.css" />
</head>
<body>
<div class="wrap">
<div class="top">
<h1>todolist</h1>
<div class="topbox">
<div class="inputbox">
<label for=""></label>
<input type="text" name="" id="" />
</div>
<div class="btnbox">
<button id="reg">등록</button>
</div>
</div>
</div>
<div id="bottom">
<ul>
</ul>
</div>
</div>
</body>
<script src="./todolist.js"></script>
</html>
- todolist.css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 700px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 2px;
}
.wrap .top {
width: 500px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrap .top .topbox {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.wrap .top .topbox .inputbox {
width: 400px;
height: 50px;
}
.wrap .top .topbox .inputbox input {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 0 10px;
display: flex;
}
.wrap .top .topbox .btnbox {
width: 50px;
height: 50px;
margin-left: 10px;
}
.wrap .top .topbox .btnbox button {
width: 100%;
height: 100%;
border-radius: 10px;
}
.wrap #bottom {
width: 500px;
height: 500px;
}
#bottom ul {
}
#bottom li {
margin-bottom: 10px;
width: 380px;
height: auto;
}
.chk {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
#bottom input {
margin-right: 5px;
display: inline;
}
#bottom #xbox {
width: 20px;
height: 20px;
border: 1px solid;
border-radius: 5px;
cursor: pointer;
display: inline-block;
float: right;
}
- todolist.js
// window.localStorage.clear();
function addlist() {
let _input = document.querySelector("input");
let _todo = window.localStorage.getItem("todo");
if (window.localStorage.length == 0) {
window.localStorage.clear();
window.localStorage.setItem("todo", `{ "content" : "${_input.value}" }`);
} else {
window.localStorage.setItem(
"todo",
_todo + "," + `{ "content" : "${_input.value}" }`
);
}
let _div = document.querySelector("#bottom");
_div.innerHTML = "";
ren();
}
reg.addEventListener("click", addlist);
function ren() {
let _todo = window.localStorage.getItem("todo");
_todo = _todo.split(",");
if (_todo[0] == null) {
cli.innerHTML = _todo[0];
cul.append(cli);
}
let _div = document.querySelector("#bottom");
let cul = document.createElement("ul");
let cli = document.createElement("li");
_todo.forEach(function (i) {
let cli = document.createElement("li");
cli.classList.add("alal");
cli.innerHTML = JSON.parse(i).content;
cul.append(cli);
});
_div.append(cul);
}
if (window.localStorage.length != 0) {
ren();
}
bottom.onmousedown = function (e) {
let ok = e.target.innerText;
let del = `{ "content" : "${ok}" }`;
console.log(del);
let _todo = window.localStorage.getItem("todo");
let todosplit = _todo.split(",");
let todoArr = [];
for (let i = 0; i < todosplit.length; i++) {
todoArr.push(todosplit[i]);
}
for (let j = 0; j < todoArr.length; j++) {
if (del == todoArr[j]) {
todoArr.splice(j, 1);
}
}
console.log(todoArr.length);
window.localStorage.removeItem("todo");
window.localStorage.setItem("todo", todoArr);
let _div = document.querySelector("#bottom");
_div.innerHTML = "";
if (todoArr.length == 0) {
window.localStorage.clear();
}
ren();
};
728x90
'JavaScript' 카테고리의 다른 글
| [Javascript] 구조분해할당 (0) | 2023.03.27 |
|---|---|
| [Javascript] cookie를 활용한 팝업창 만들기 (0) | 2023.03.27 |
| [Javascript] 마우스 관련 메소드를 활용한 상자 색 옮기기 (0) | 2023.03.24 |
| [Javascript] 생성자 함수와 자주쓰는 DOM, BOM 메소드 (0) | 2023.03.21 |
| [Javascript] callback 함수를 활용한 일반 함수와 화살표 함수 사용 및 this의 차이점 알아보기 (0) | 2023.03.16 |