티스토리 뷰

(기초)그래서 뭘 배운거야?/JavaScript

JS-124-BOM Storage : 브라우저 데이터 저장 영역

Soheny.P 2021. 10. 7. 13:21
728x90
<!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>
    
<!-- 
        * localStorage : 데이터를 저장할 수 있는 장소로, 만료기간 없음
 -->

    <script>

        // localStorage 이용한 데이터 저장
        // 키, 값 쌍으로 저장하기
        localStorage.setItem("Hee", "Soheny");

        let hee = localStorage.getItem("Hee");
        // Soheny
        console.log(hee);

        // 저장된 localStorage 지우기
        // 지정한 키, 값만 지우기
        localStorage.removeItem("Hee");
        // 전체 다 지우기
        localStorage.clear();
        // Null
        console.log(localStorage.getItem("Hee"));
        
    </script>
</body>

</html>

넷플릭스에서 사용하는 방식

 

<!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>
    
<!-- 
        * localStorage : 데이터를 저장할 수 있는 장소로, 만료기간 없음

        * sessionStorage : 데이터를 저장할 수 있는 장소로, 브라우저 닫아도 계속 저장한 데이터 남아있음
        
 -->


    <script>

        // localStorage 이용한 데이터 저장
        // 키, 값 쌍으로 저장하기
        localStorage.setItem("name", "Soheny");
        let name = localStorage.getItem("name");
        // Soheny
        console.log(name);

        sessionStorage.setItem("nick", "SO");
        let nick = localStorage.getItem("nick");
        console.log(nick);
        
    </script>
</body>

</html>

 

 

<!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>
    <button id="setnum">Setting Data Number</button>
    <button id="btn">SAVE</button>


    <script>
        let num = localStorage.getItem("num");
        // 맨 처음엔 설정된 값 없으므로 null출력
        console.log(num);


        // SAVE버튼 클릭시, num이란 키에 위에 설정한 num 값을 넣음
        document.getElementById("btn").addEventListener("click",function(){
            localStorage.setItem("num", num);
        });

        // num100으로 설정
        document.getElementById("setnum").addEventListener("click",function(){
            num = 100;
        });

        // console값이 100으로 변경
		// 브라우저 창 다시 켜도 100 그대로 유지
               
    </script>
</body>

</html>

 

 

<!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>
    <button id="setnum">Setting Data Number</button>
    <button id="btn">SAVE</button>


    <script>
        let num = localStorage.getItem("num");
        // 맨 처음엔 설정된 값 없으므로 null출력
        console.log(num);


        // SAVE 버튼 클릭시, num이란 키에 위에 설정한 num 값을 넣음
        document.getElementById("btn").addEventListener("click",function(){
            localStorage.setItem("num", num);
        });

        // num100으로 설정
        document.getElementById("setnum").addEventListener("click",function(){
            num = 100;
        });
        
        // 브라우저 창 다시 키면 초기화 (세션 살아있을 때 까지만 그 값을 가지고 있음)

               
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > JavaScript' 카테고리의 다른 글

JS-125-BOM(window.open) : 새창, 새페이지 열기  (0) 2021.10.09
JS-123-BOM console.time : 작업 수행 소요시간 체크  (0) 2021.10.07
JS-122-Regular Expression : 정규표현식 (복습/심화)  (0) 2021.10.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함