WEB 스토리지(localStorage, sessionStorage), 쿠키를 JavaScript로 사용해 본다
WEB 스토리지(localStorage, sessionStorage), 쿠키 개요
WEB Storage(localStorage, sessionStorage)는 HTML5로 새롭게 만들어진 구조로 브라우저에 데이터를 저장할 수 있습니다. 마찬가지로 데이터를 저장하는 구조에 쿠키가 있지만, 이곳은 주로 세션을 관리하는 목적으로 사용되며 단순한 브라우저에 데이터의 저장은 WEB Storage를 이용하는 경우가 많다고 합니다.
브라우저에 저장된 데이터는 개발자 도구의 애플리케이션 탭에서 볼 수 있습니다.
참고에 일람이 있으므로, 보는 것을 추천합니다.
참고
시도해보기
localStorage와 sessionStorage의 사용법은 기본적으로 동일합니다.localStorage.setItem(key, 値);에 데이터를 저장하고 localStorage.getItem(key)에 저장된 값을 가져옵니다. 또한 localStorage.removeItem(key);에서 키에 해당하는 값을 삭제합니다. (sessionStorage의 메소드도 동일)
index.html...
<script src="./index.js"></script>
</head>
<body>
<h1>local storageを使ってみる</h1>
<input type="button" value="localStorage" onclick='setLocalStorage()'>
<input type="button" value="sessionStorage" onclick='setSessionStorage()'>
<input type="button" value="cookie" onclick='setCookie()'>
</body>
</html>
localStorage를 사용해보기
index.jslet setLocalStorage = () => {
if(localStorage.getItem('localKey') === null) {
//localStorageにデータがなかったらhogeを入れる
localStorage.setItem('localKey', 'hoge');
} else if(localStorage.getItem('localKey') === 'hoge') {
//localStorageにデータがあったら'hoge'+'hoge'を入れる
let localKeyValue = localStorage.getItem('localKey');
localStorage.setItem('localKey', localKeyValue + 'hoge');
} else {
//localStorageを削除する
localStorage.removeItem('localKey');
}
}
버튼을 한 번 클릭하면
버튼을 두 번 클릭하면
sessionStorage를 사용해보기
index.jslet setSessionStorage = () => {
if(sessionStorage.getItem('sessionKey') === null) {
sessionStorage.setItem('sessionKey', 'hoge');
} else if(sessionStorage.getItem('sessionKey') === 'hoge') {
//sessionStorageにデータがあったら'hoge'+'hoge'を入れる
let sessionKeyValue = sessionStorage.getItem('sessionKey');
sessionStorage.setItem('sessionKey', sessionKeyValue + 'hoge');
} else {
//sessionStorageを削除する
sessionStorage.removeItem('sessionKey');
}
}
버튼을 두 번 클릭하면
이쪽은 탭을 닫고 다시 열면 값이 사라지고 있는 것을 확인할 수 있다.
쿠키를 사용해보십시오.
쿠키의 경우 스토리지와 달리 document.cookie = 'name=hoge'; 형식으로 데이터를 저장합니다. 복수의 값을 설정하는 경우도 하나씩 순서대로 document.cookie에 대입하는 것으로, 각각 따로 저장할 수 있다.
쿠키 보존 기간을 설정할 때 document.cookie = "名前=値; max-age=残存期間";또는 document.cookie = "名前=値; expires=日付";로 기재하면된다.
참고
index.jslet setCookie = () => {
// console.log(document.cookie)
if(document.cookie === '') {
document.cookie = 'name=hoge';
} else if(document.cookie === 'name=hoge'){
let preCookie = document.cookie;
console.log(document.cookie)
document.cookie = `id=1; max-age=300`; //有効期間300秒を設定
} else {
console.log(document.cookie);
}
}
버튼을 두 번 클릭
버튼을 3회 클릭
다음과 같이 이름 = 값; 이름 = 값; 형식으로 저장됩니다.
브라우저를 재기동하면 유효기간을 설정한 id만 보존되어 있는 것을 확인할 수 있다.
Reference
이 문제에 관하여(WEB 스토리지(localStorage, sessionStorage), 쿠키를 JavaScript로 사용해 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Friskseed/items/8da5ef175d4e82bd9368
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
localStorage와 sessionStorage의 사용법은 기본적으로 동일합니다.
localStorage.setItem(key, 値);에 데이터를 저장하고 localStorage.getItem(key)에 저장된 값을 가져옵니다. 또한 localStorage.removeItem(key);에서 키에 해당하는 값을 삭제합니다. (sessionStorage의 메소드도 동일)index.html
...
<script src="./index.js"></script>
</head>
<body>
<h1>local storageを使ってみる</h1>
<input type="button" value="localStorage" onclick='setLocalStorage()'>
<input type="button" value="sessionStorage" onclick='setSessionStorage()'>
<input type="button" value="cookie" onclick='setCookie()'>
</body>
</html>
localStorage를 사용해보기
index.js
let setLocalStorage = () => {
if(localStorage.getItem('localKey') === null) {
//localStorageにデータがなかったらhogeを入れる
localStorage.setItem('localKey', 'hoge');
} else if(localStorage.getItem('localKey') === 'hoge') {
//localStorageにデータがあったら'hoge'+'hoge'を入れる
let localKeyValue = localStorage.getItem('localKey');
localStorage.setItem('localKey', localKeyValue + 'hoge');
} else {
//localStorageを削除する
localStorage.removeItem('localKey');
}
}
버튼을 한 번 클릭하면
버튼을 두 번 클릭하면
sessionStorage를 사용해보기
index.js
let setSessionStorage = () => {
if(sessionStorage.getItem('sessionKey') === null) {
sessionStorage.setItem('sessionKey', 'hoge');
} else if(sessionStorage.getItem('sessionKey') === 'hoge') {
//sessionStorageにデータがあったら'hoge'+'hoge'を入れる
let sessionKeyValue = sessionStorage.getItem('sessionKey');
sessionStorage.setItem('sessionKey', sessionKeyValue + 'hoge');
} else {
//sessionStorageを削除する
sessionStorage.removeItem('sessionKey');
}
}
버튼을 두 번 클릭하면
이쪽은 탭을 닫고 다시 열면 값이 사라지고 있는 것을 확인할 수 있다.
쿠키를 사용해보십시오.
쿠키의 경우 스토리지와 달리
document.cookie = 'name=hoge'; 형식으로 데이터를 저장합니다. 복수의 값을 설정하는 경우도 하나씩 순서대로 document.cookie에 대입하는 것으로, 각각 따로 저장할 수 있다.쿠키 보존 기간을 설정할 때
document.cookie = "名前=値; max-age=残存期間";또는 document.cookie = "名前=値; expires=日付";로 기재하면된다.참고
index.js
let setCookie = () => {
// console.log(document.cookie)
if(document.cookie === '') {
document.cookie = 'name=hoge';
} else if(document.cookie === 'name=hoge'){
let preCookie = document.cookie;
console.log(document.cookie)
document.cookie = `id=1; max-age=300`; //有効期間300秒を設定
} else {
console.log(document.cookie);
}
}
버튼을 두 번 클릭
버튼을 3회 클릭
다음과 같이 이름 = 값; 이름 = 값; 형식으로 저장됩니다.
브라우저를 재기동하면 유효기간을 설정한 id만 보존되어 있는 것을 확인할 수 있다.
Reference
이 문제에 관하여(WEB 스토리지(localStorage, sessionStorage), 쿠키를 JavaScript로 사용해 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Friskseed/items/8da5ef175d4e82bd9368텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
