브라우저 저장소의 차이점과 class를 활용한 모듈화

Web Storage

key:value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다.
영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분하여 응용 환경에 맞는 선택이 가능하다.

특징
1. 서버 전송이 없다.
저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어 지지 않는다.
2. 단순 문자열을 넘어 객체정보를 저장할수 있다.
3. 용량의 제한이 없다.
4. 영구 데이터 저장이 가능하다.
5. Cookie와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다.

localStorage

1. 저장한 데이터를 영구적으로 보관할 수 있다.
   (브라우저를 종료하더라도 다음번에 접속했을 때 그 데이터를 사용할수 있다.)

2. 도메인 마다 별도의 localStorage가 생성된다.
   Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어 진다.
   도메인만 같으면 전역으로 공유가 가능하다.

sessionStorage

1. 데이터가 지속적으로 보관되지 않는다.
   현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

2. Windows 전역 객체의 sessionStorage 라는 컬렉션을 통해 저장과 조회가 이루어진다.
   브라우저가 종료되면 데이터도 같이 지워진다. (브라우저가 종료되면 SssionStorage도 삭제)

3. 브라우저마다 별도의 sessionStorage가 생성된다.
   같은사이트 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이된다. (브라우저 컨텍스트가 다르기 때문)
   브라우저를 하나 더 실행해서 같은 페이지를 실행 했을때, 이 두페이지의 sessionStorage는 각각 별개의 영역으로 침범하지 못한다.

4. 자동 임시저장 기능

Class활용한 모듈화

Class를 활용한 모듈화는 객체지향 프로그래밍에서 많이 사용하는 방법 중 하나이다. Class는 객체를 생성하기 위한 일종의 템플릿으로, 객체의 속성과 메서드를 정의하는 데 사용된다. 이를 활용하여 각각의 Class에 해당하는 기능들을 만들고 조합하여 모듈화할 수 있다.
즉 class안에 함수를 넣는걸 모듈화라고 한다.

fuction plus(a,b){
	return a + b
}
fuction minus(a,b){
	return a - b
}
fuction multiplication(a,b){
	return a * b
}
fuction divide(a,b){
	return a / b
}

이렇게 함수가 여러게 있다. 이 여러개의 함수를 모듈화 하기 위해선 class 안에 넣어주는게 좋다.

class calculation {
	fuction plus(a,b){
		return a + b
	}
	fuction minus(a,b){
		return a - b
	}
	fuction multiplication(a,b){
		return a * b
	}
	fuction divide(a,b){
		return a / b
	}
}

이렇게 하고 내부에 있는 함수를 가져오기 위해선

const i = new calculation();
calculation.plus(1,2) //3
calculation.minus(3,4) //-1
calculation.multiplication(5,6) // 30
calculation.divide(10,5) //2

이렇게 코드를 짜면된다.