Vanilla JS #5

Local Storage

브라우저에 기본적으로 내장된 로컬 스토리지를 통해 미니 DB를 가질 수 있다.

로컬 스토리지는 키 : 값 형태를 갖는다.

localStorage.setItem("name","Kim Dong Hwan"); // Item 추가

위 이미지를 보면 “name” 키로 “kim Dong Hwan”이 로컬 스토리지에 등록된 것을 확인할 수 있다.

const name = localStorage.getItem("name"); // Item 읽기
localStorage.removeItem("name"); // Item 제거
localStorage.clear(); // Item 전체 제거

Local Storage API : MDN Document

JSON in Local Storage

로컬 스토리지의 값은 기본적으로 string으로 되어 있어 JS에서 반복문 등의 작업에 불편하다.

따라서 JSON : JavaScript Object Notation 으로 변환해 줄 필요가 있다.

JSON.stringfy(object) : object -> string

JSON.parse(string) : string -> object

예시

const person1={
	name:"Kim",
	age:"30",
};
const person2={
	name:"Lee",
	age:"20",
};

const people=[person1,person2];

localStorage.setItem("List",people); // object 형식으로 저장됨 (확인 어려움)
localStorage.setItem("List",JSON.stringify(people)); // string 형식으로 변환해서 저장

const list=localStorage.getItem("List"); // string 형식으로 get (연산 어려움)
const list=JSON.parse(localStorage.getItem("List")); // JSON 형식으로 get 

list.forEach((item)=>console.log(`name : ${item.name}, age : ${item.age}`));
// OUTPUT
// name : Kim, age : 30
// name : Lee, age : 20

참고사항

화살표 함수는 함수를 간단히 정의 할 수 있는 방법이다.

// 기존의 익명 함수
(function (a) {
  return a + 100;
});

// 1. "function"이라는 단어를 제거하고 인자와 여는 대괄호 사이에 화살표를 배치합니다.
(a) => {
  return a + 100;
};

// 2. 중괄호와 "return"이라는 단어를 제거하면 반환이 암시됩니다.
(a) => a + 100;

// 3. 매개변수의 괄호를 제거합니다.
a => a + 100;

JS은 array.forEach함수를 호출할때 array안의 각 item을 첫인자로 넘긴다.

The forEach() method of Array instances executes a provided function once for each array element.

Interval/Timeout Funtion

setInterval 함수를 이용하면 함수를 일정 시간 간격마다 실행하게 할 수 있다.

setTimeout함수를 이용하면 한번 일정 시간 후에 함수를 한번 실행하게 할 수 있다.

setInterval(function, delay); // delay 경과마다 주기적 function 실행
setTimeout(function,delay); // delay 경과 후 function 한번 실행

setInterval : MDN

setTimeout : MDN

Padding String

시계를 나타낼 때 1시를 01시로 표시하듯이,

string에 padding을 해주고 싶을 때 간단하게 추가해 줄 수 있는 함수가 있다.

String.prototype.padStart()

The padStart() method of String values pads this string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of this string.

// string.padStart(string의 최소 길이,공백을 채울 문자);
const str="3";
console.log(str.padStart(5,"X"));
// output : "XXXX3"

padStart는 문자열 앞에 패딩을 추가하고, padEnd는 문자열 뒤에 패딩을 추가한다.

String.prototype.padEnd()

The padEnd() method of String values pads this string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of this string.

Random

math.random()을 사용하면 0-1 사이의 숫자를 랜덤하게 얻을 수 있다.

이를 특정 수를 곱하고, 정수 변환해주면 일정 범위내의 임의의 값을 얻을 수 있다.

• round() : 반올림
• ceil() : 올림
• floor() : 내림

Create HTML in JS

const myH1 = document.createElement("h1");
myH1.innerHTML="Hello";
document.body.appendChild(myH1); // 맨 뒤에 추가
document.body.prepand(myH1); // 맨 앞에 추가