[Window_Object] JS - localStorage 속성 - 웹브라우저에 키/값 쌍을 데이터 영구저장 (IE8 이상) ※ 쿠키 대용 (= 토글 효과 지속・유지)

localStorage 예제 - 저장 후 불러오기

 

<div id="hz"></div>

<script>

// 브라우저 지원 체크

if (typeof(Storage) !== "undefined") {

     // 키/값 짝으로 저장

    localStorage.setItem("host", "Homzzang.com");

 

    // name으로 탐색해 출력

    document.getElementById("hz").innerHTML = localStorage.getItem("host"); 

 

} else {

 

    document.getElementById("hz").innerHTML = "Web Storage 지원 X";

 

}

</script>

 

결과보기 (지원 브라우저 경우 결과값: Homzzang.com)

window.localStorage 정의 

 

웹 브라우저에 키/값 쌍을 저장 가능. 

 

---

 

※ localStorage 속성은 window 객체의 속성 중 하나. 따라서, 앞에 window 안 붙여도 됨.

 

1.

localStorage 객체는 만료 날짜가 없는 데이터를 저장. 

브라우저 닫아도 데이터 삭제 안 되며 다음 (날・주・연도)에 사용 가능.

 

2.

localStorage 속성은 읽기 전용.

cf.

sessionStorage 속성 : 세션 데이터 저장.  (※ 브라우저 탭 닫으면 데이터 손실 됨) 

 

3.

IE8 이상 주요 최신 브라우저 모두 지원.

 

window.localStorage 구문 

 

window.localStorage

 

데이터를 localStorage에 저장

localStorage.setItem("key", "value");

 

localStorage에서 데이터 읽기

var host = localStorage.getItem("key");

 

localStorage에서 데이터 제거

localStorage.removeItem("key");

 

---

[반환값]

 

스토리지 객체.

 

localStorage 예제 - 클릭 횟수

※ 브라우저 닫아다 다시 열어도 이어서 클릭 횟수 증가

 

<script>

function clickCounter() {

    if(typeof(Storage) !== "undefined") {

        if (localStorage.clickcount) {

            localStorage.clickcount = Number(localStorage.clickcount)+1;

        } else {

            localStorage.clickcount = 1;

        }

        document.getElementById("result").innerHTML = "버튼 클릭 횟수: " + localStorage.clickcount + " 회";

    } else {

        document.getElementById("result").innerHTML = "web storage 지원 X.";

    }

}

</script>

<p><button onclick="clickCounter()" type="button">클릭</button></p>

<div id="result"></div>

결과보기

localStorage 예제 - 토글 효과 지속

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

 

<div id="bo_list" style="display:block">bo_list</div>

<button id="toggle">toggle</button>

<script type="text/javascript">

$(document).ready(function() {

    $('#toggle').click(function() {

        if ($("#bo_list").css("display") == "none") {

            $('#bo_list').css("display", "block");

            localStorage.setItem("bo_list", "block");

        } else{

            $('#bo_list').css("display", "none");

            localStorage.setItem("bo_list", "none");

        }                

        console.log("set: " + $('#bo_list').css("display"));

    });

    var display = localStorage.getItem('bo_list');

    ($("#bo_list").css("display", display));

    console.log("get: " + display);

});

</script>

 

결과보기

취미생활 님 (200525) https://sir.kr/qa/360619