JAVASCRIPT - 중급 3편

* Local Storage

브라우저 내에서 사용 가능한 "비휘발성" 저장 공간 ( 사이트 재접속해도 유지 )

크롬 기준 F12 > Application > Local Storage > 하단 트리

문자, 숫자, array, object 저장 가능

※ array와 object는 반드시 "JSON"으로 변경 후 저장 가능

ex )

javascript

var arr = [1,2,3];
var newarr = JSON.stringify(arr); // array/object > JSON 로 변형
localStorage.setItem('num',newarr);
var print = localStorage.getItem('num');
console.log(print); // result :  [1,2,3]
var newarr2 = JSON.parse(print) // JSON > array/object 로 변형
console.log(newarr2) // result : (3) [1, 2, 3]

1. Local Storage 저장

localStorage.setItem('key','value') // Local Storage에 저장

2. Local Storage 추출

localStorage.getItem('key') // key에 해당하는 value 추출

3. Local Storage 삭제

localStorage.removeItem('key') // key에 해당하는 value와 같이 삭제

4. Local Storage 수정

1) 저장되어있는 자료를 꺼내기 ( 2.추출 )

2) 꺼낸 자료를 수정 ( 별도로 수정 )

3) 다시 저장 ( 1.저장 )

* Session Storage

브라우저 내에서 사용 가능한 "휘발성" 저장 공간 ( 사이트 종료시 자동삭제 )

크롬 기준 F12 > Application > Local Storage > 하단 트리

문자, 숫자, array, object 저장 가능

※ array와 object는 반드시 "JSON"으로 변경 후 저장 가능

ex )

javascript

var arr = [1,2,3];
var newarr = JSON.stringify(arr); // array/object > JSON 로 변형
sessionStorage.setItem('num',newarr);
var print = sessionStorage.getItem('num');
console.log(print); // result :  [1,2,3]
var newarr2 = JSON.parse(print) // JSON > array/object 로 변형
console.log(newarr2) // result : (3) [1, 2, 3]

1. Session Storage 저장

sessionStorage.setItem('key','value') // Local Storage에 저장

2. Session Storage 추출

sessionStorage.getItem('key') // key에 해당하는 value 추출

3. Session Storage 삭제

sessionStorage.removeItem('key') // key에 해당하는 value와 같이 삭제

4. Session Storage 수정

1) 저장되어있는 자료를 꺼내기 ( 2.추출 )

2) 꺼낸 자료를 수정 ( 별도로 수정 )

3) 다시 저장 ( 1.저장 )

* mouse 이벤트

1. mousedown : 마우스를 눌렀을때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('mousedown',function() {
  // 마우스를 눌렀을때
  console.log("down") // result : "down"
})

2. mouseup : 마우스를 눌렀다 땠을 때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('mouseup',function() {
  // 마우스를 눌렀다 땠을 때
  console.log("up") // result : "up"
})

3. mousemove : 마우스를 이동할 때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('mousemove',function() {
  // 마우스를 이동할 때
  console.log("Mmove") // result : "Mmove"
})

* 마우스 좌표 확인하기

1. clinetX : 마우스의 X좌표

ex)

document.getElementById('box').addEventListener('mousemove',function(event) { // id가 box인 요소 내에서 마우스가 이동할때마다 
  console.log(event.clinetX); // 마우스의 X좌표를 표기
})

2. clinetY : 마우스의 Y좌표

ex)

document.getElementById('box').addEventListener('mousemove',function(event) { // id가 box인 요소 내에서 마우스가 이동할때마다 
  console.log(event.clinetY); // 마우스의 Y좌표를 표기
})

* touch 이벤트 ( 모바일 활용 )

모바일은 mouse 이벤트가 아닌 "touch 이벤트"를 사용해야 한다

1. touchstart : 스크린을 터치 했을때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('touchstart',function() {
  // 스크린을 터치 했을때
  console.log("start") // result : "start"
})

2. touchend : 스크린을 터치했다 땠을 때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('touchend',function() {
  // 스크린을 터치했다 땠을 때
  console.log("end") // result : "end"
})

3. touchmove : 스크린을 터치 후 이동할 때 발생되는 이벤트

ex)

document.getElementById('box').addEventListener('touchmove',function() {
  // 스크린을 터치 후 이동할 때
  console.log("Tmove") // result : "Tmove"
})