storing data
✦ local storage
: localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다. 저장한 데이터는 세션 간에 공유된다(= 새로 고침해도 저장한 데이터는 유지됨). 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다.
✧ localStorage.setItem(keyName, value) : key와 vaule 쌍 추가.
✧ localStorage.getItem(keyName) : key에 해당하는 value 받아오기.
✧ localStorage.removeItem(keyName) : key와 해당 value를 삭제.
✧ localStorage.clear() : 모든 것을 삭제.
✧ localStorage.key(index) : 인덱스에 해당하는 key를 받아옴.
✧ localStorage.length : 저장된 항목의 개수를 얻음.
//ex1)
localStorage.setItem("username", "sonya");
const savedUsername = localStorage.getItem("username");
console.log(savedUsername); //sonya
//ex2)
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
function onLoginSubmit(event) { //유저 정보가 submit 됐을 경우에
event.preventDefault(); //잠시 멈추고
loginForm.classList.add("hidden"); //form을 숨긴 다음
const username = loginInput.value; //input에 입력된 value를 변수 username에 저장한다.
localStorage.setItem("username", username); //그 다음 localStorage에 value인 username을 "username"이라는 key 아래에 저장한다.
paintGreetings(username); //유저 정보 저장이 완료되면 greeting을 화면에 보여준다.
}
function paintGreetings (username) { //username을 인자로 받는다.
greeting.innerText = `Hello ${username}!` //먼저 greeting의 텍스트를 Hello {username}으로 바꿔준 후
greeting.classList.remove("hidden"); //hidden 클래스를 없애준다(결과적으로 greeting이 보여짐).
}
const savedUsername = localStorage.getItem("username"); //localStorage에서 username 값 가져와 변수 savedUsername에 저장하기.
if (savedUsername === dull) { //만약 savedUsername에 아무런 유저 정보가 저장되어 있지 않을 경우,
//show the form, form을 화면상에 보이게 한다.
loginForm.classList.remove("hidden"); //hidden 클래스를 없애 form을 보이게 한다.
loginForm.addEventListener("submit", onLoginSubmit); //이후 input에 값이 submit되면 함수 onLoginSubmit을 실행한다.
} else { //하지만 저장된 유저 정보가 존재하는 경우에는
//show the greetings, greeting을 보여준다.
paintGreetings(savedUsername) //savedUsername을 인자로 전달하여 paintGreetings 함수를 실행한다.
}(+2023/06/20)
localStorage에는 string 타입의 값만 저장할 수 있다.
value에 string이 아닌 값을 저장하려면, JSON.stringify()을 사용한다.
✧ 자바스크립트 템플릿 리터럴
: ES6부터 새로 도입된 문자열 표기법으로, 내장된 표현식을 허용하는 문자열 리터럴이다. 문자열 생성 시 따옴표 대신 백틱을 사용한다. 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있다.
- 문법
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`- 표현식 삽입법 (expression interpolation)
: template literals를 이용하면 이를 더욱 읽기 쉽도록 활용할 수 있음.
//일반 문자열
function onLoginSubmit() {
event.preventDefault();
const username = loginInput.value;
console.log("hello " + username + "!"); //hello username!
}▼▼▼
//템플릿 리터럴
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
console.log(`hello ${username}!`); //hello username!
}- 줄바꿈
: 템플릿 리터럴을 이용하면 쉽게 줄바꿈이 가능하다.
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
console.log(`hello ${username}!
how was your day?`);
}
//hello username
//how was your day?참고
coding & others