서버없이 데이터를 javascript만을 이용해 로컬에 저장하는방법

2024. 10. 16. 03:35ㆍ컴관련

반응형
 

로컬스토리지와 세션스토리지를 이용해, 서버 없이 간편하게 데이터를 사용자의 로컬에 저장하기 

웹개발을 하다 보면, 간단한 데이터를 저장해야 하는 상황이 자주 발생하는데 굳이 PHP 같은 백엔드 언어가 필요하지 않은 상황에서 서버구축을 하거나 데이터베이스를 연동하거나 쿠키를 사용하는 것은 너무 불필요하고 귀찮은 일이다. 

이럴 때 로컬스토리지(localStorage)나 세션스토리지(sessionStorage)를 이용하면 목적에 맞게 데이터를 서버 없이 로컬 브라우저에 저장하고 쉽게 불러올 수 있다.

 

반응형

1. 로컬스토리지(localStorage) 와 세션스토리지(sessionStorage) 의 차이점

항목

로컬스토리지(localStorage)

세션스토리지(sessionStorage)

유효 기간

영구적, 사용자가 삭제 전까지 유지

탭 또는 창이 닫힐 때 삭제

데이터 공유

동일 도메인 내의 모든 탭에서 공유

현재 탭에서만 유효

사용 예

사용자 설정, 장기 데이터 저장

로그인 세션, 일시적 데이터

데이터 용량

5~10MB

5~10MB

 

 

 

2. 사용방법.

● 단일 데이터 유형을 저장할때.

로컬스토리지(localStorage) 

localStorage.setItem('key', 'value');       // 로컬스토리지에 저장
localStorage.getItem('key');                   // 로컬스토리지에서 호출
localStorage.removeItem('key');           // 로컬스토리지 삭제
localStorage.clear();                               // 모든 데이터 삭제

 

세션스토리지(sessionStorage) 

sessionStorage.setItem('key', 'value');       // 세션스토리지에 저장
sessionStorage.getItem('key');                   // 세션스토리지에서 호출
sessionStorage.removeItem('key');            // 세션스토리지 삭제
sessionStorage.clear();                                // 모든 데이터 삭제

 


● JSON 형식 데이터를  저장할때
저장할 때는 JSON.stringify, 불러올 때는 JSON.parse를 사용.

로컬스토리지(localStorage) 

localStorage.setItem('key', JSON.stringify({name: 'John', age: 30})); // 저장
JSON.parse(localStorage.getItem('key'));                             // 호출
localStorage.removeItem('key');                                        // 삭제

 

세션스토리지(sessionStorage) 

sessionStorage.setItem('key', JSON.stringify({name: 'Jane', age: 25}));  // 저장
JSON.parse(sessionStorage.getItem('key'));                                     // 호출
sessionStorage.removeItem('key');                                                     // 삭제

 

 


3. 예제 - 로컬스토리지를 이용한 데이터 저장, 호출, 삭제

로컬스토리지와 세션스토리지는 이름만 다르고 나머지는 완전히 동일하다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage 예제</title>
</head>
<body>
    <h1>LocalStorage 사용 예제</h1>
    
    <button onclick="saveData()">데이터 저장</button>
    <button onclick="loadData()">데이터 호출</button>
    <button onclick="clearData()">데이터 삭제</button>

    <script>
        // 데이터 저장
        function saveData() {
            localStorage.setItem("username", "John Doe");
            let user = { name: "John Doe", age: 30 };
            localStorage.setItem("user", JSON.stringify(user));
            alert("데이터가 저장되었습니다.");
        }

        // 데이터 호출
        function loadData() {
            let username = localStorage.getItem("username");
            let user = JSON.parse(localStorage.getItem("user"));
            
            if (username && user) {
                alert("이름: " + username + "\n" + "나이: " + user.age);
            } else {
                alert("저장된 데이터가 없습니다.");
            }
        }

        // 데이터 삭제
        function clearData() {
            localStorage.clear();
            alert("모든 데이터가 삭제되었습니다.");
        }
    </script>
</body>
</html>

 

 

4. 언제 사용하면 좋을까?

● 로컬스토리지 - 장기적으로 유지되어야 하는 데이터 (사용자 테마 설정, 즐겨찾기 정보 등)을 저장하는 데 적합. 브라우저를 닫아도 데이터가 유지되기 때문에 오랫동안 사용할 정보를 보관할 수 있습니다.

● 세션스토리지 - 일시적인 데이터(로그인 상태나 임시 사용자 입력 데이터)를 저장할 때 적합. 브라우저 탭을 닫으면 데이터가 자동으로 삭제됩니다.

 

※참고. 로컬 파일의 경로 변경에 대한 영향

로컬스토리지와 세션스토리지는
로컬 파일의 경우 경로나 파일 이름이 변경되더라도 데이터가 계속 유지됩니다.

브라우저는 file:// 출처를 기준으로 데이터를 관리하기 때문에,
같은 브라우저에서 열리는 모든 로컬 파일은 동일한 로컬스토리지 및 세션스토리지 공간을 공유합니다.

단, 세션스토리지는 현재 탭에서만 유효하므로 탭을 닫거나 새로 열면 세션스토리지 데이터는 사라집니다.

 

 

 

반응형

'컴관련' 카테고리의 다른 글

PG사 입점 심사 가이드: 등록불가 업종 및 위험업종 리스트  (5) 2024.11.09
IIS 서버 절전 모드에서 접속 가능한 전원 옵션 설정 방법  (0) 2024.08.19
애드센스 결제수단 추가 - 은행 영문명과 SWIFT CODE  (0) 2024.07.03
윈도우11에서 윈도우10 그림판 사용하는 방법  (0) 2024.04.09
[VB.NET] 온라인상의 이미지를 다운로드 후 BASE64로 인코딩하고 Picturebox에 표시하기  (2) 2023.10.16

관련글

티스토리툴바