JavaScript에서 파일에 데이터 쓰기
HTML5 웹 스토리지 API를 사용하면 클라이언트 측에서 로컬로 데이터를 저장할 수 있습니다. 소량의 데이터만 클라이언트 측에서 로컬로 저장할 수 있으며 최대 크기는 5MB 이하여야 합니다.
웹 스토리지 API를 사용하는 경우 데이터는 특정 시점에 서버로 전달되거나 다시 전송되지 않습니다. 파일 내에서 항상 로컬로 사용할 수 있습니다.
HTML 5 Web Storage API를 사용하여 클라이언트 측에서 데이터 저장
일반적으로 클라이언트 측에서 데이터를 저장하기 위한 두 가지 유형의 HTML 웹 저장소 개체가 있습니다.
- 로컬 저장소 (
window.localStorage)
로컬 저장소에서는 브라우저 창이 닫힌 후에도 데이터를 항상 사용할 수 있습니다. 이 유형은 사용자가 웹페이지를 시크릿 모드(프라이빗 브라우징)로 보는 경우 적용되지 않습니다. 이 경우 마지막 비공개 창이 닫힌 직후 데이터가 지워집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
localStorage.setItem('company', 'Google');
const storedValue = localStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
먼저 company_name의 id가 있는 빈 div 요소가 있습니다. 이 div 요소 안에 값을 표시하고 로컬 저장소에 저장할 것입니다.
localStorage 내부에 값을 삽입하려면 키-값 쌍의 형태로 값을 전달해야 합니다. 로컬 저장소에서 제공하는 setItem 메서드를 사용하여 이 프로세스를 수행할 수 있습니다. 이 경우 company는 키이고 Google은 값입니다. setItem 메서드는 아무 것도 반환하지 않습니다. 로컬 저장소 내부에 값을 저장합니다.
값을 되돌리기 위해 로컬 스토리지는 얻고자 하는 값의 key를 인수로 사용하는 getItem() 메소드를 제공합니다. 그런 다음 storedValue라는 변수에 결과를 저장합니다. 이 시점에서 storedValue 안에 Google 값이 있고 이 값을 div 태그 안에 표시하기만 하면 됩니다.
이렇게 하려면 먼저 document.getElementById 메서드를 사용하여 id 속성의 도움으로 div 요소를 가져와 company_name이라는 새 변수 안에 HTML 요소를 저장해야 합니다.
마지막으로 innerHTML 속성을 사용하여 storedValue 변수 안에 있는 값을 company_name.innerHTML = storedValue로 div 요소에 추가합니다.
- 세션 저장소 (
window.sessionStorage)
데이터를 저장하기 위해 세션 저장소를 사용할 때마다 데이터는 브라우저 탭이 열릴 때까지 사용할 수 있으며 페이지 세션이 종료되면 지워집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
sessionStorage.setItem('company', 'Google');
const storedValue = sessionStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
여기에서 코드는 Local Storage의 코드와 완전히 유사합니다. 유일한 차이점은 localStorage 대신 sessionStorage를 사용했다는 것입니다. 먼저 Google 값은 sessionStorage 안에 저장됩니다. 이 값은 값과 관련된 key를 getItem() 메소드에 전달하여 나중에 간단히 액세스할 수 있습니다. 그런 다음 이 값을 storedValue 변수에 저장합니다. 결국 이 값을 div에 추가하고 화면에 값을 표시합니다.
모든 최신 브라우저는 이 두 가지 유형을 모두 지원합니다.
로컬 저장소에 대한 웹 저장소 데이터 삭제
이미 보았듯이 세션 저장소는 브라우저 탭이나 전체 브라우저가 닫히자마자 모든 데이터를 삭제합니다. 그러나 보안상의 이유로 또는 개인적인 필요로 인해 로컬 데이터도 삭제하려는 경우에는 어떻게 해야 합니까? 이렇게 하는 방법도 있습니다.
여기에는 두 가지 경우가 있습니다.
- 로컬 저장소에서 특정 값을 삭제하고 싶다면 아래 방법을 사용하면 됩니다.
remove메소드에서 삭제하려는 값에 대한key를 전달해야 합니다.localStorage.remove('key') - 전체 로컬 저장소를 지우려면 이 방법을 사용하면 됩니다.
localStorage.clear()
이 두 가지 방법 모두 브라우저 탭이나 브라우저 자체가 닫힐 때 실행됩니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn