JavaScript에서 파일에 데이터 쓰기

  1. HTML 5 Web Storage API를 사용하여 클라이언트 측에서 데이터 저장
  2. 로컬 저장소에 대한 웹 저장소 데이터 삭제

HTML5 웹 스토리지 API를 사용하면 클라이언트 측에서 로컬로 데이터를 저장할 수 있습니다. 소량의 데이터만 클라이언트 측에서 로컬로 저장할 수 있으며 최대 크기는 5MB 이하여야 합니다.

웹 스토리지 API를 사용하는 경우 데이터는 특정 시점에 서버로 전달되거나 다시 전송되지 않습니다. 파일 내에서 항상 로컬로 사용할 수 있습니다.

HTML 5 Web Storage API를 사용하여 클라이언트 측에서 데이터 저장

일반적으로 클라이언트 측에서 데이터를 저장하기 위한 두 가지 유형의 HTML 웹 저장소 개체가 있습니다.

  1. 로컬 저장소 (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_nameid가 있는 빈 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 = storedValuediv 요소에 추가합니다.

  1. 세션 저장소 (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 안에 저장됩니다. 이 값은 값과 관련된 keygetItem() 메소드에 전달하여 나중에 간단히 액세스할 수 있습니다. 그런 다음 이 값을 storedValue 변수에 저장합니다. 결국 이 값을 div에 추가하고 화면에 값을 표시합니다.

모든 최신 브라우저는 이 두 가지 유형을 모두 지원합니다.

로컬 저장소에 대한 웹 저장소 데이터 삭제

이미 보았듯이 세션 저장소는 브라우저 탭이나 전체 브라우저가 닫히자마자 모든 데이터를 삭제합니다. 그러나 보안상의 이유로 또는 개인적인 필요로 인해 로컬 데이터도 삭제하려는 경우에는 어떻게 해야 합니까? 이렇게 하는 방법도 있습니다.

여기에는 두 가지 경우가 있습니다.

  1. 로컬 저장소에서 특정 값을 삭제하고 싶다면 아래 방법을 사용하면 됩니다. remove 메소드에서 삭제하려는 값에 대한 key를 전달해야 합니다. html localStorage.remove('key')
  2. 전체 로컬 저장소를 지우려면 이 방법을 사용하면 됩니다. html localStorage.clear()

이 두 가지 방법 모두 브라우저 탭이나 브라우저 자체가 닫힐 때 실행됩니다.

관련 문장 - JavaScript File

  • JavaScript에서 줄 단위로 파일 읽기
  • JavaScript에서 텍스트 파일 읽기
  • JavaScript에서 파일 이름 확장명 가져오기