일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- input
- 자바스크립트
- CMD
- Button
- html
- IntelliJ
- 이클립스
- 배열
- js
- windows
- string
- Visual Studio Code
- json
- vscode
- javascript
- 이탈리아
- ArrayList
- Eclipse
- table
- CSS
- Java
- 테이블
- 인텔리제이
- Maven
- list
- Array
- 문자열
- Files
- date
- 자바
- Today
- Total
어제 오늘 내일
[Javascript] localStorage 만료 시간 설정하기 본문
localStorage는 세션이 변경되어도
데이터 정보가 그대로 유지됩니다.
이번에는 localStorage 데이터에 만료 시간을 설정하고,
일정 시간이 지나면, 데이터를 이용할 수 없도록 하는 방법을 알아보도록 하겠습니다.
Step1. 데이터 저장 시 만료일자 설정하기
// 만료 시간과 함께 데이터를 저장
function setItemWithExpireTime(keyName, keyValue, tts) {
// localStorage에 저장할 객체
const obj = {
value : keyValue,
expire : Date.now() + tts
}
// 객체를 JSON 문자열로 변환
const objString = JSON.stringify(obj);
// setItem
window.localStorage.setItem(keyName, objString);
}
function setItemWithExpireTime(keyName, keyValue, tts)
이 함수는 localStorage에 저장할 key, value와 만료시간(tts)를 밀리세컨드 단위로 입력 받습니다.
const obj = {
value : keyValue,
expire : Date.now() + tts
}
localStorage에 저장할 객체를 하나 생성하고,
value값은 파라미터로 입력받은 keyValue를 세팅하고,
expire에는 '현재일자+만료기간' 을 세팅하여, 만료되는 시간을 세팅해 줍니다.
const objString = JSON.stringify(obj);
localStorage에는 객체를 저장할 수 없기 때문에,
위 구문을 이용해서 객체를 JSON 문자열로 변환해 줍니다.
window.localStorage.setItem(keyName, objString);
문자열로 변환한 객체를
파라미터로 입력받은 keyName과 함께
localStorage에 저장해줍니다.
Step2. 데이터를 읽을 때, 만료일자 체크하기
// 만료 시간을 체크하며 데이터 읽기
function getItemWithExpireTime(keyName) {
// localStorage 값 읽기 (문자열)
const objString = window.localStorage.getItem(keyName);
// null 체크
if(!objString) {
return null;
}
// 문자열을 객체로 변환
const obj = JSON.parse(objString);
// 현재 시간과 localStorage의 expire 시간 비교
if(Date.now() > obj.expire) {
// 만료시간이 지난 item 삭제
window.localStorage.removeItem(keyName);
// null 리턴
return null;
}
// 만료기간이 남아있는 경우, value 값 리턴
return obj.value;
}
function getItemWithExpireTime(keyName)
localStorage에서 읽고 싶은 아이템의 key를 파라미터로 입력 받습니다.
const objString = window.localStorage.getItem(keyName);
localStorage에서 데이터를 읽어옵니다.
if(!objString) {
return null;
}
localStorage에서 읽어온 데이터가 존재하는지 체크합니다.
만약, localStorage에 존재하지 않는 값이면 null을 리턴합니다.
if(Date.now() > obj.expire)
현재 시간과 localStorage에서 읽어온 객체의 expire 값을 비교합니다.
현재 시간이 expire 값보다 크다면,
만료기간이 이미 지났다는 뜻이겠죠?
window.localStorage.removeItem(keyName);
return null;
이미 만료기간이 지났다면
localStorage에 저장되어 있던 아이템을 삭제하고,
이 함수는 null을 리턴합니다.
return obj.value;
만료기간이 지나지 않은 데이터는
localStorage에서 읽어온 값 중 value값을 찾아서 리턴합니다.
Step3. 만료일자와 함께 데이터 저장하고, 읽기
이제는 Step1, Step2 에서 만들어 놓은 함수들을 활용하는 예제입니다.
이 예제는
'data set' 버튼을 클릭하면,
만료시간을 5초로 설정하여 'name' 데이터를 localStorage에 저장하고,
'data get' 버튼을 클릭하면,
만료시간을 체크하여 localStorage의 'name' 데이터를 읽어옵니다.
<HTML>
<input id='set_btn'
type='button'
value='data set'
/>
<input id='get_btn'
type='button'
value='data get'
/>
<div id='result'></result>
< Javascript >
// 만료 시간과 함께 데이터를 저장
function setItemWithExpireTime(keyName, keyValue, tts) {
// localStorage에 저장할 객체
const obj = {
value : keyValue,
expire : Date.now() + tts
}
// 객체를 JSON 문자열로 변환
const objString = JSON.stringify(obj);
// setItem
window.localStorage.setItem(keyName, objString);
}
// 만료 시간을 체크하며 데이터 읽기
function getItemWithExpireTime(keyName) {
// localStorage 값 읽기 (문자열)
const objString = window.localStorage.getItem(keyName);
// null 체크
if(!objString) {
return null;
}
// 문자열을 객체로 변환
const obj = JSON.parse(objString);
// 현재 시간과 localStorage의 expire 시간 비교
if(Date.now() > obj.expire) {
// 만료시간이 지난 item 삭제
window.localStorage.removeItem(keyName);
// null 리턴
return null;
}
// 만료기간이 남아있는 경우, value 값 리턴
return obj.value;
}
// 'data set' 버튼 클릭
set_btn.addEventListener("click", () => {
// localStorage에 5초 만료시간을 설정하고 데이터 저장
setItemWithExpireTime("name", "anna", 5000)
})
// 'data get' 버튼 클릭
get_btn.addEventListener("click", () => {
// localStorage의 데이터를 읽어온다
const value = getItemWithExpireTime("name");
// 읽어온 데이터를 화면에 출력한다
const resultDiv = document.getElementById('result');
resultDiv.innerText = value;
})
function setItemWithExpireTime(keyName, keyValue, tts)
Step1에서 설명한 만료일자를 설정하여 localStorage에 데이터를 저장하는 함수입니다.
function getItemWithExpireTime(keyName)
Step2에서 설명한 만료일자를 체크하여 localStorage 데이터를 읽어오는 함수입니다.
set_btn.addEventListern(.....
'data get' 버튼을 클릭하면 localStorage에 5초 만료시간을 설정하고,
key는 name, value는 anna인 데이터를 저장합니다.
get_btn.addEventListener(....
'data set' 버튼을 클릭하면
key가 'name'인 데이터를 만료기간을 체크하여 localStorage에서 읽어옵니다.
'IT > Javascript' 카테고리의 다른 글
[CSS/JavaScript] 버튼(element) 숨기기 보이기 (0) | 2022.03.15 |
---|---|
크롬(Chrome) 에서 localStorage 값 확인하기 (0) | 2022.03.08 |
[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) (1) | 2022.03.07 |
[Javascript] 버튼 클릭 시, 노드 복사/붙여넣기 (0) | 2022.03.06 |
[Javascript] 함수 반복적으로 실행하기, 종료하기 (setInterval(), clearInterval()) (0) | 2022.03.06 |