localStorage란 사용자 로컬에 저장하는 임시 저장소이다. 저장된 데이터는 만료 기간이 없지만, settionStorage와는 차이가 있다.
localStorage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#colorEl {
width: 300px;
height: 300px;
background-color: yellow;
}
#fontEl {
width: 300px;
height: auto;
padding: 10px 0;
line-height: 1.3;
font-size: 14px;
font-family: 'Arial';
}
</style>
</head>
<body>
<div style="padding: 10px 0">
<label for="colorSelector">Bgcolor</label>
<select id="colorSelector">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<label for="fontSelector">font</label>
<select id="fontSelector">
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Courier">Courier</option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
</select>
</div>
<div class="wrap">
<div id="colorEl"></div>
<div id="fontEl">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<script src="./js/app.js"></script>
</body>
</html>/js/app.js
// detect storage support
(function() {
var storageAvailable = (type) => {
try {
var storage = window[type],
x = '__storage_test__'
storage.setItem(x, x)
storage.removeItem(x)
return true
} catch (e) {
return e instanceof DOMException && (
e.code === 22 || // All web browsers except Firefox
e.code === 1014 || // Firefox
e.name === 'QuotaExceededError' || // All web browsers except Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') // firefox
&& storage.length !== 0
}
}
if (storageAvailable('localStorage')) {
console.log("localstorage support")
} else {
console.log("localstorage do not support")
}
})()
var colorEl = document.getElementById('colorEl')
var fontEl = document.getElementById('fontEl')
var colorSelector = document.getElementById('colorSelector')
var fontSelector = document.getElementById('fontSelector')
if (!localStorage.getItem('color')) {
populateStorage()
} else {
setStyle()
}
function populateStorage() {
localStorage.setItem('color', colorSelector.value)
localStorage.setItem('fontStyle', fontSelector.value)
setStyle()
}
function setStyle() {
var currentColor = localStorage.getItem('color')
var currentFontStyle = localStorage.getItem('fontStyle')
colorSelector.value = currentColor
fontSelector.value = currentFontStyle
colorEl.style.backgroundColor = currentColor
fontEl.style.fontFamily = currentFontStyle
}
colorSelector.onchange = populateStorage
fontSelector.onchange = populateStorage참고링크
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
올드보이 코더