자바스크립트 세션 스토리지에 slider 발류 저장법

조회수 307회

레인지 인풋 slider의 발류 (슬라이더의 마지막 위치)를 세션 스토리지에 저장했다가 웹페이지 새로고침 했을때 그 마지막 발류값이 뜨도록 하고싶은데.. 이제 막 시작한 초보라 정확히 잘 모르겠네요 ㅠㅠ

구글 찾아본 결과 json.stringfy를 써서 어떻게 해야한다는데...알려주실 수 있는분 계실까요?

1 답변

  • 좋아요

    2

    싫어요
    채택 취소하기

    https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

    sessionStorage는 이렇게 쓰고요:

    sessionStorage.setItem('key', 'value');
    let a = sessionStorage.getItem('key');
    console.log(a); // value
    

    넣을 값이 문자열이 아니라 객체 타입이면 JSON.stringify()로 문자열을 만든다음 저장한 뒤, 꺼낼 때 객체로 되돌리는 방법을 씁니다:

    let obj = { a: 1, b: 2 };
    sessionStorage.setItem('foo', JSON.stringify(obj));
    let obj2 = JSON.parse(sessionStorage.getItem('foo'));
    console.log(obj2); // Object { a: 1, b: 2 }
    

    이걸 응용해서 '레인지 인풋 slider의 value'를 저장하고 꺼내면 되겠죠?


    추가 답변입니다.

    sessionStorage.setItem('key', 'value');
    let a = sessionStorage.getItem('key');
    console.log(a);
    

    이 코드는 단순히 sessionStorage가 이런거다- 라고 예시로 작성한 코드구요. 진짜 이렇게 set 다음에 바로 get을 하는 것은 그냥 빈 공간에 넣다 뺏다하는 것 뿐인 아무 의미가 없는 코드가 됩니다.

    저장이 필요한 시점에 set을 하고, 저장된 값을 불러와야 할 때 get을 해야해요.

    댓글의 코드는 이렇게 생겼는데:

    function onSliderChanged(slider) { 
      wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`); 
      let val= [slider.value]; 
      sessionStorage.setItem("sl",JSON.stringify(val)); 
      let val1 = JSON.parse(sessionStorage.getItem('sl')); 
      console.log(val1); 
    }
    

    JSON 파싱은 저장할 값의 타입이 객체일 때만 필요합니다. (sessionStorage는 문자열만 저장 가능하기 때문)

    slider.value는 아무래도 그냥 숫자나 문자 같은데, 이런 원시타입의 값은 JSON으로 변환할 필요가 없습니다.

    결국 저 함수는 이렇게 고쳐야 합니다:

     function onSliderChanged(slider) { 
      wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`); 
      sessionStorage.setItem("sl", JSON.stringify(slider)); 
     }
    

    그리고 페이지가 새로고침되면 즉시 실행되는 함수에서 get을 해서 wwr_req() 함수에 넘겨보세요.

    • 감사합니다! 슬라이더를 움직일대 console.log(obj2) 가 로그에 뜨는 것 같은데, 리프레쉬하면 결국 다시 리셋되는데 (슬라이더의 위치가). 이것 이외로 따른 펑션이 필요한걸까요? 아님 제가 뭔가 잘못하고 있는 걸까요? wwr_start(); function onSliderChanged(slider) { wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`); let val= [slider.value]; sessionStorage.setItem("sl",JSON.stringify(val)); let val1 = JSON.parse(sessionStorage.getItem('sl')); console.log(val1); } <input type=range min=0 max=3 value=1 step=any id="3" oninput="onSliderChanged(this)"> </p> <p> 김병윤 2023.1.31 15:18
    • 추가 답변을 덧붙였습니다. 편집요청빌런 2023.2.1 15:14

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)