webapis
formapi
storageapi
아래는 Local Storage와 Session Storage에 대한 간단한 설명과 차이점을 정리한 표입니다.
Local Storage와 Session Storage는 모두 클라이언트 측에서 데이터를 저장하는 웹 스토리지 기술입니다. 하지만 두 기술의 차이점은 다음과 같습니다.
- 저장 위치: Local Storage는 해당 도메인에서 모든 스크립트에서 접근 가능한 공유 스토리지이며, Session Storage는 현재 브라우저 탭 또는 세션에서만 접근 가능한 개인 스토리지입니다.
- 저장 용량: Local Storage와 Session Storage 모두 대부분 5~10MB의 용량을 가집니다.
- 존속 기간: Local Storage는 영구적으로 데이터가 유지되지만, Session Storage는 현재 브라우저 탭 또는 세션이 종료되면 데이터가 삭제됩니다.
- 도메인 공유: Local Storage는 도메인에서 공유되므로, 동일한 도메인을 사용하는 다른 페이지에서도 접근이 가능합니다. 하지만 Session Storage는 브라우저 탭 또는 세션에서만 접근 가능하므로, 다른 브라우저 탭이나 세션에서는 접근이 불가능합니다.
- 사용 예시: Local Storage는 로그인 정보, 사용자 설정 등의 데이터를 저장하는데 사용되며, Session Storage는 쇼핑 카트 정보, 워크플로우 상태 등의 데이터를 저장하는데 사용됩니다.
개발자 도구를 열고, Application 탭을 클릭합니다. 그리고 좌측 사이드바에서 Storage > Local Storage를 선택합니다. 그러면 현재 웹사이트에서 사용하는 local storage 목록이 보입니다. 해당 키(key)를 클릭하면, 해당 키(key)에 대한 값을 볼 수 있습니다. 삭제하려면, 키(key)를 선택한 상태에서 오른쪽 버튼을 누르고 'Delete'를 클릭하시면 됩니다.
workersapi
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
if (typeof w == "undefined") {
const workerScript = `
let counter = 0;
setInterval(() => {
counter++;
postMessage(counter);
}, 1000);
`;
const blob = new Blob([workerScript], {type: 'application/javascript'});
w = new Worker(URL.createObjectURL(blob));
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>위 코드에서는 worker.js 파일 대신, const workerScript 변수에 문자열로 JavaScript 코드를 작성합니다.
그리고 new Blob([workerScript], {type: 'application/javascript'})를 호출하여 문자열 코드를 Blob 객체로 변환한 뒤, URL.createObjectURL()로 Blob URL을 생성합니다.
이렇게 생성된 Blob URL을 new Worker()로 전달하여 웹 워커를 생성합니다.
fetchapi
'JavaScript' 카테고리의 다른 글
| Browser Object Model (0) | 2023.02.14 |
|---|
