로컬스토리지 예제

로컬스트리지를 이용해 글상자의 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에서 보기

https://jsfiddle.net/hyuckjin/dLs4j7ht/