일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- localstorage
- React
- getBoundingClientRect
- For
- scrollevent
- insertAdjacentHTML
- scrollY
- 이벤트리스너
- NodeList
- html
- mousemove
- scroll
- Animation
- NAV
- swiper
- classList
- 스크롤
- 반복문
- 애니메이션
- Hover
- swiperjs
- width
- pointermove
- addEventListener
- JavaScript
- forEach
- input
- Sticky
- css
- 확장성
- Today
- Total
목록localstorage (2)
ZeroToHunnit Coding
오늘은 localstorage에 데이터 저장하는거 공부했는데 이거는 바닐라 자바스크립트할 때도 공부했던거라 수월하긴 했는데 예제 혼자 공부하는데 좀 애를 먹었다. 바닐라 자스도 다시 제대로 공부해야겠구만.. 1. localstorage로 반영구적인 데이터 저장이 가능하다. 2. localStorage.setItem('key', 'value') : 데이터 저장 3. localStorage.getItem('key') : 데이터 출력 4. localStorage.removeItem('key') 데이터 삭제 5. 로컬스토리지에 데이터를 수정하려면 데이터를 꺼내서 수정하고 다시 저장하면 됨. 6. 로컬스토리지는 문자만 저장할 수 있기 때문에 array나 object자료로 저장하려면 json으로 바꿔야함. 7. a..
위와 같이 그냥 닫기를 누르면 새로고침해도 다시 뜨고, 오늘 하루 보지 않기를 누르면 새로고침해도 뜨지 않다가 하루 뒤에 열리는 팝업을 만들어보았다. 보통 쿠키로 많이 만드는데 현재 시간만 저장하면 되는데 서버와 통신해야하나 싶어서 로컬스토리지가 더 효율적일거같아 로컬스토리지에 저장하는 방식으로 만들었다. HTML contents 닫기 오늘 하루 보지 않기 CSS button { border: 0; background: none; cursor: pointer; } .main-popup { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background-color: #f..