본문 바로가기
Front End/Javascript

[JavaScript] 웹 스토리지(localStorage, sessionStorage) 사용해 보기

Full Stack Developer 101 2024. 11. 18. 11:47

웹 스토리지 객체(web storage object)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다.

웹 스토리지 객체(web storage object)는 브라우저 내에 키/값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 

쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요? 그 이유는 다음과 같습니다.

  • 쿠키는 네트워크 요청 시 서버로 전송되지만 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 그렇기 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다.
  • 또 다른 점은 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 
  • 웹 스토리지 객체는 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.

 

메서드와 프로퍼티

  • setItem(key, value) – 저장하기(키/값)
  • getItem(key) – 키에 해당하는 값 얻기
  • removeItem(key) – 삭제하기
  • clear() – 모두 지우기
  • key(index) – 인덱스(index)에 해당하는 키얻기
  • length – 저장된 항목의 개수 얻기
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage 사용하기</title>
    <script>
        // 저장하기
        localStorage.setItem('name', '나그네');
        localStorage.setItem('age', 23);
        localStorage.setItem('gender', true);
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
        // 개수 일아 내기
        console.log(`${localStorage.length}개의 데이터가 저장되어 있습니다.`);
       
        // 값 얻기
        let name = localStorage.getItem("name")
        let age = localStorage.getItem("age")
        let gender = localStorage.getItem("gender")
       
        console.log(`${typeof (name)} : ${name}`);
        console.log(`${typeof (age)} : ${age}`);
        console.log(`${typeof (gender)} : ${gender}`);
       
        // 값 삭제하기
        localStorage.removeItem('gender');
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
       
        // 모두 삭제
        localStorage.clear();
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
        console.log(`${localStorage.length}개의 데이터가 저장되어 있습니다.`);
    </script>
</head>

<body>
</body>

</html>

 

이름, 나이, 성별을 저장해보고 읽어 보았습니다.

특이한 점은 모두 string으로 처리한다는 것입니다. 어떤값을 저장해도 string으로 처리 됩니다.

setItem(), getItem(), removeItem()을 이용하여 저장/읽기/삭제 등을 수행 합니다. 수정은 같은 키로 다시 저장하면 됩니다.

 

소스의 하단에 모두 지우는 코드를 주석처리 하고 실행해 보시기기 바랍니다.

브라우저의 개발자 모드를 활성화 하고 '애플리케이션' (edge의 경우 응용프로그램 ) 탭을 열고 "로컬스트리지"를 보시면 저장된 값을 확인하실 수 있습니다.

 

 

일반 객체 처럼 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage 사용하기</title>
    <script>
        // 일반 객체처럼 사용하기
        // 1. 저장
        localStorage.name = '두사람';
        localStorage.age = 33;

        // 2. 얻기
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
        console.log(`${localStorage.name}`);
        console.log(`${localStorage.age}`);
       
        // 3. 키 삭제하기
        delete localStorage.name;
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);

        // 개수 일아 내기
        console.log(`${localStorage.length}개의 데이터가 저장되어 있습니다.`);

        // 모두 삭제
        localStorage.clear();
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
        console.log(`${localStorage.length}개의 데이터가 저장되어 있습니다.`);
    </script>
</head>

<body>
</body>

</html>

 

 

 

키 순회하기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage 사용하기</title>
    <script>
        // 저장하기
        localStorage.setItem('name', '나그네');
        localStorage.setItem('age', 23);
        localStorage.setItem('gender', true);
        console.log(`저장된 키 : ${Object.keys(localStorage)}`);
        console.log(`${localStorage.length}개의 데이터가 저장되어 있습니다.`);
        console.log(`~`.repeat(40));

        // 키값 얻기
        console.log(`첫번째 키 : ${localStorage.key(0)}`)
        console.log(`두번째 키 : ${localStorage.key(1)}`)
        console.log(`세번째 키 : ${localStorage.key(2)}`)
        console.log(`~`.repeat(40));

        // 키 순회
        for (let i = 0; i < localStorage.length; i++) {
            let key = localStorage.key(i);
            console.log(`${key}: ${localStorage.getItem(key)}`);
        }
        console.log(`~`.repeat(40));

        // 이렇게 사용하면 내장 필드까지 출력
        for (let key in localStorage) {
            console.log(`${key}: ${localStorage.getItem(key)}`);
        }
        console.log(`~`.repeat(40));

        for (let key in localStorage) {
            if (!localStorage.hasOwnProperty(key)) {
                continue; // setItem, getItem 등의 키를 건너뜁니다.
            }
            console.log(`${key}: ${localStorage.getItem(key)}`);
        }
        console.log(`~`.repeat(40));

        for (let key of Object.keys(localStorage)) {
            console.log(`${key}: ${localStorage.getItem(key)}`);
        }
        console.log(`~`.repeat(40));

    </script>
</head>

<body>
</body>

</html>

 

localStorage.key(index)를 이용하여 키를 얻을 수 있습니다.
모든 키를 한번에 얻으려면 Object.keys(localStorage)를 사용합니다.
for~ in을 사용할때는 주의 해야 합니다. localStorage의 모든 메서드와 속성까지 모두 출력됩니다.
Object.keys(localStorage) 와 for ~ of 를 사용하면 편리 합니다.

 

무두 문자열로 인식합니다. 객체를 저장할때는 JSON.stringify()를 이용하고 읽을때는 JSON.parse()를 이용해야 합니다.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage 사용하기</title>
    <script>
        // 문자열만 사용됨!! 객체 저장
        let user1 = {
            id: 1004,
            name:"한사람",
        }
        localStorage.user = user1;
        console.log(`${localStorage.user}`); // [object Object]
        let user2 = localStorage.user;
        console.log(`${typeof (user2)} : ${user2}`); // string : [object Object]

        localStorage.user = JSON.stringify(user1);
        user2 = localStorage.user;
        console.log(`${typeof (user2)} : ${user2}`); // string : {"id":1004,"name":"한사람"}
        let user3 = JSON.parse(user2)
        console.log(`${typeof (user3)} : ${JSON.stringify(user3)}`); // object : {"id":1004,"name":"한사람"}
       
        let users = [
            {id: 1004, name:"한사람",gender : true},
            {id: 1005, name:"두사람",gender : false},
            {id: 1006, name:"세사람",gender : false},
        ];

        localStorage.users = users;
        console.log(`${localStorage.users}`); // [object Object],[object Object],[object Object],[object Object]
        let users2 = localStorage.users;
        console.log(`${typeof (users2)} : ${users2}`); //string : [object Object],[object Object],[object Object],[object Object]

        localStorage.users = JSON.stringify(users);
        users2 = localStorage.users;
        // string : [{"id":1004,"name":"한사람","gender":true},{"id":1005,"name":"두사람","gender":false},
        //              {"id":1006,"name":"세사람","gender":false}]
        console.log(`${typeof (users2)} : ${users2}`);
        let users3 = JSON.parse(users2)
        // object : [{"id":1004,"name":"한사람","gender":true},{"id":1005,"name":"두사람","gender":false},
        //              {"id":1006,"name":"세사람","gender":false}]
        console.log(`${typeof (users3)} : ${JSON.stringify(users3)}`);
    </script>
</head>

<body>
</body>

</html>

 

sessionStorage 객체는 localStorage에 비해 자주 사용되지 않습니다. sessionStorage는 현재 떠 있는 탭 내에서만 유지됩니다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문입니다. 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않습니다. 하지만 탭을 닫고 새로 열 때는 사라집니다.

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage 사용하기</title>
    <script>
        // 저장하기
        sessionStorage.setItem('name', '나그네');
        sessionStorage.setItem('age', 23);
        sessionStorage.setItem('gender', true);
        console.log(`저장된 키 : ${Object.keys(sessionStorage)}`);
        // 개수 일아 내기
        console.log(`${sessionStorage.length}개의 데이터가 저장되어 있습니다.`);
       
        // 값 얻기
        let name = sessionStorage.getItem("name")
        let age = sessionStorage.getItem("age")
        let gender = sessionStorage.getItem("gender")
       
        console.log(`${typeof (name)} : ${name}`);
        console.log(`${typeof (age)} : ${age}`);
        console.log(`${typeof (gender)} : ${gender}`);
       
        // 값 삭제하기
        sessionStorage.removeItem('gender');
        console.log(`저장된 키 : ${Object.keys(sessionStorage)}`);
       
        // 모두 삭제
        //sessionStorage.clear();
        //console.log(`저장된 키 : ${Object.keys(sessionStorage)}`);
        //console.log(`${sessionStorage.length}개의 데이터가 저장되어 있습니다.`);
    </script>
</head>

<body>
</body>

</html>

 

 

브라우저의 개발자 모드를 활성화 하고 '애플리케이션' (edge의 경우 응용프로그램 ) 탭을 열고 "세션저장소"를 보시면 저장된 값을 확인하실 수 있습니다.

 

 

새로운 탭을 열고 보시면 사라진것을 확인 가능합니다.

 

storage Event 지정하기

window.onstorage = event => {
     내용.....
}
window.addEventListener('storage', () => {
      내용....
});

 

localStorage나 sessionStorage의 데이터가 갱신될 때 storage  이벤트가 실행됩니다. storage 이벤트는 다음과 같은 프로퍼티를 지원합니다.

  • key – 변경된 데이터의 키(.clear()를 호출했다면 null)
  • oldValue – 이전 값(키가 새롭게 추가되었다면 null)
  • newValue – 새로운 값(키가 삭제되었다면 null)
  • url – 갱신이 일어난 문서의 url
  • storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 이벤트가 발생합니다.

 

두개 이상의 창을 띄워서 실습을 진행해야 합니다.  창은 다르지만 localStorage는 모두 공유 합니다. 그래서 1개의 창에서 localStorage에 이벤트를 발생시키면 다른 창에서 이벤트를 감지 합니다. 

 

두개의 창을 띄워 같은 아래의 파일을 실행합니다. 한 쪽에서 새로고침을 해봅니다.

<!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>
    <script>
        // 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
        window.addEventListener('storage', (e) => { // window.onstorage = (e) => {
            console.log(JSON.stringify(e))
            if (e.key != 'now') return;
            console.log(e.key + ':' + e.newValue + " at " + e.url);
        });

        localStorage.setItem('now', Date.now());
    </script>
</body>

</html>

 

 

localStorageEx01.html
0.00MB
localStorageEx02.html
0.00MB
localStorageEx03.html
0.00MB
localStorageEx04.html
0.00MB
localStorageEx05.html
0.00MB
localStorageEx06.html
0.00MB

'Front End > Javascript' 카테고리의 다른 글

[JavaScript] localforage를 이용한 CRUD(저장/읽기/수정/삭제)  (1) 2024.11.19
[JavaScript] localStorage를 이용한 CRUD(저장/읽기/수정/삭제)  (0) 2024.11.18
[JavaScript] localforage 사용해 보기  (0) 2024.11.13
[JavaScript] SPA/MPA & SSR/CSR  (5) 2024.11.12
[JavaScript] Axios 사용해 보기  (4) 2024.11.08

'Front End/Javascript' Related Articles

티스토리툴바