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

Question

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

조회수 139회

javascript

html

css

0

싫어요

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

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

김병윤 5 points

2023-01-31 14:00:04에 작성됨

댓글 입력

score 2 · Accepted Answer

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() 함수에 넘겨보세요.