로컬스트리지를 이용해 글상자의 background-color, color 값을 저장하고 다시 불러오는 예제입니다.
<textarea name="txt" id="txt" cols="30" rows="10"></textarea><br>
<label for="textcolor">change text color</label>
<input type="color" id="textcolor"><br>
<label for="bgcolor">change bg color</label>
<input type="color" id="bgcolor"><br>
<button id="set_color">set color</button>
<button id="get_color">get color</button>
$('#txt').val('글상자 영역의 색상 값을 저장합니다.');
$('#textcolor').change(function() {
var color = $(this).val();
$('#txt').css('color', color);
});
$('#bgcolor').change(function() {
var color = $(this).val();
$('#txt').css('backgroundColor', color);
});
$('#set_color').click(function() {
var bgcolor = $('#bgcolor').val();
var textcolor = $('#textcolor').val();
// 객체 형태로 키 값에 여러 값을 저장할 수 있음.
var obj = {
bgcolor: bgcolor,
textcolor: textcolor
}
// 데이터를 스트링으로 변환하기 위해 JSON.stringify()로 문자열로 변환 후 저장
localStorage.setItem('color', JSON.stringify(obj))
});
$('#get_color').click(function() {
// JSON.parse()를 이용해 문자열을 객체로 변환
var color = JSON.parse(localStorage.getItem('color'));
$('#txt').css({
'backgroundColor': color.bgcolor,
'color': color.textcolor
});
});
크롬 개발자 도구에서 스토리지를 확인할 수 있습니다.
jsfiddle에서 보기
반응형
'javascript' 카테고리의 다른 글
map() 함수 (0) | 2019.10.28 |
---|---|
화살표 함수 (0) | 2019.10.24 |
퀴즈 만들기 (0) | 2019.10.18 |
ES6의 클래스 (0) | 2019.10.17 |
3d page 만들기 (0) | 2019.10.08 |