localstorage vs sessionstorage
세션 스토리지는 웹페이지의 세션이 끝날때 저장된 데이터가 지워집니다.
로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.
기본 api
웹스토리지는 키와 값으로 이루어져 있습니다.
//키에 데이터 쓰기
localStorage.setItem("key", value);
//키로 부터 데이터 읽기
localStorage.getItem("key");
//키의 데이터 삭제
localStorage.removeItem("key");
//모든 키의 데이터 삭제
localStorage.clear();
//저장된 키/값 쌍의 개수
localStorage.length:;
웹 스토리지를 사용할때 주의해야할 부분은, 오직 문자형 데이터 타입만 지원합니다.
숫자를 값으로 넣어도, 키를 넣고 출력하며 string 으로 나옵니다.
웹 스토리지를 사용할때 json 형태로 데이터를 일고 쓰기를 많이 합니다.
localStorage.setItem('json',JSON.stringify({a:1,b:2}))
JSON.parse(localStorage.getItem('json'))
{a:1,b:2}
배열형을 사용할때도 동일한 방법으로 해결됩니다.
localStorage.setItem('nums',JSON.stringify([1,2,3]))
JSON.parse(localStorage.getItem('nums'))
[1,2,3]
데이터 청소,
로컬 스토리지에 저장된 데이터는 웹페이지를 닫는다고 해서 사라지지 않으므로 불필요한 데이터가 남지 않도록 삭제해줍니다.
localStorage.clear()index,html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Notes App</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script src="app.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
</head>
<body>
<button class="add" id="add"><i class="fas fa-plus"></i>Add note</button>
</body>
</html>fontawesome cdn 과 marked cdn 를 가져와 붙였습니다.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
//addnote 버튼을 누르면 새로운 메모장이 생기는데, 가로행으로 넓혀나갑니다,
그러다 윈도우 창을 벗어나야 한다면 줄 바꿈 합니다
body {
background-color: #7bdaf3;
display: flex;
flex-wrap: wrap;
font-family: "Poppins", sans-serif;
margin: 0;
padding-top: 3rem;
}
.add {
background-color: #9ec862;
border-radius: 3px;
border: none;
color: white;
cursor: pointer;
padding: 0.5rem 1rem;
position: fixed;
top: 1rem;
right: 1rem;
}
.note {
background-color: #fff;
margin:20px;
height:400px;
width:400px;
}
.note .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note .main {
background-color: #eee;
overflow: hidden;
height: 400px;
width: 100%;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 400px;
width: 100%;
}
//main 과 textarea에 번갈아 가며 hidden 을 나타냅니다
.note .hidden {
display: none;
}
css 는 .js 에 있는 html 파일도 꾸며줍니다
const addBtn = document.getElementById("add");
//localStorage 에 저장되어 있는 값을 불러 옵니다, notes 라는 키를 넣고, 값을
//반환받습니다 , notes 에는 textarea 에 적힌 값들이 들어 있습니다, 그것은 String 타입입니다. parse 메소드로 array-like 로 바꿀 수 있습니다.
const notes = JSON.parse(localStorage.getItem("notes"));
//초기값 notes 는 [] 껍데기 입니다.
console.log(notes);
//notes 는 지금 Object 타입입니다
console.log(typeof (notes));
if (notes) { //만약 값이 들어 있다면 그 모든 문자들을 addNewNote에 전달합니다
//값이 null 이라면 false 로 작동 안합니다.
notes.forEach((note) => {
console.log(note);
addNewNote(note);
});
}
addBtn.addEventListener("click", () => {//addBtn 을 누리면 addNewNote가 실행됩니다
addNewNote();
});
function addNewNote(text = "") {//다른 페이지에 있는 모든 문자들이 초기화 됩니다.
//또는 화면단에 없는 텍스트 에리어를 화면에 뿌립니다.
const note = document.createElement("div");
//div 태그에 note에 class ="note" 를 붙여줍니다.
note.classList.add("note");
//<div class="note">여기에 밑의 로직들이 들어갑니다</div>
//addBtn 을 누르면 div class=note 가 나와서 새로운 메모장이 생깁니다.
note.innerHTML = `
<div class="notes">
<div class="tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main ${text ? "" : "hidden"}"></div>
<textarea class="${text ? "hidden" : ""}"></textarea>
</div>
`;//main 이 공백이고 textarea 가 히든상태, edit 하지 못하는 상태입니다
// main 이 히든이고, textarea 에 히든이 없을때 edit 가능한 상태입니다.
//addBtn 을 누르면 처음에 main hidden 이고 (버튼 누르면 null 을 던져서 false 그레서 hidden) class 는 null 입니다.
const editBtn = note.querySelector(".edit");
const deleteBtn = note.querySelector(".delete");
const main = note.querySelector(".main");
const textArea = note.querySelector("textarea");
textArea.value = text;
main.innerHTML = marked(text);
editBtn.addEventListener("click", () => {
main.classList.toggle("hidden");
textArea.classList.toggle("hidden");
});
deleteBtn.addEventListener("click", () => {
note.remove();
});
textArea.addEventListener("input", (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
updateLS();
});
document.body.appendChild(note);
}
function updateLS() {
// textarea 를 데려왔습니다
const notesText = document.querySelectorAll("textarea");
// notes 는 배열입니다, 내용은 없는 빈 껍데기 입니다.
const notes = [];
//textarea
notesText.forEach((note) => {
// note는 textarea 한 태그를 말합니다
console.log(note);
//note 는 Object 입니다
console.log(typeof (note));
//note 에 적히는 값들이 전부 console 에 찍힙니다
console.log(note.value);
//빈 배열에 note 의 값들을 저장합니다
notes.push(note.value);
});
// localStorage에 notes라는 키 이름으로 notes를 문자형태로 저장합니다
// notes 는 해당 메소드에 들어가기 전까지 String 이 아니였습니다.
localStorage.setItem("notes", JSON.stringify(notes));
//모든 값들을 localStorage 에 저장하기때문에 "새로고침", 새로운 브라우저에서
//열어도 모든 값들은 저장되어 있습니다.
//모든 값 (공백 포함) 이 localStorage 에 저장되어 있기 때문에 새로고침해도
//웹 브라우저에 남아 있습니다, 왜냐면 값들을 addnewnote 에 던지기 때문이죠
//하지만 아무값 입력없이 넣고 새로고침하면 저장되지 않습니다
}
건물주가 되는 그날까지