2021.12.27.Mon.
✍ 복습
프론트에서 정보를 표현
인터넷으로는 문자열만 전송할 수 있다.
- html요소 : urlencoded형식
- 자바스크립트 객체 : 객체를 문자열로 표현하는 표준 JSON 형식
자바스크립트는 json을 직접 처리가능하다. 하지만 자바 등에서는 외부 프로그램의 도움이 필요하다.
JavaScript Object Notation (JSON)
json은 객체를 문자열로 표현하는 방식
const user = {
username : 'spring',
password: 1234
}
// json은 객체를 문자열로 표현하는 방식
const str = JSON.stringify(user);
// json 문자열을 js객체로 변경
const user2 = JSON.parse(str);localStorage 와 sessionStorage
사용자의 웹 브라우저에 데이터를 저장하기.
sessionStorage는 브라우저를 닫으면 데이터가 사라진다.
$(document).ready(function(){
localStorage.setItem('irum','홍길동');
// 주석을 걸어도 값이 사라지지 않고 계속 남아있다.
const irum = localStorage.getItem('irum');
console.log(irum);주소록 만들기
<script>
let addressBook = [];
let sequence = 0; // 1씩 증가하는 값
let $ul = undefined;
function printAddressBook() {
// #list 내부의 lis들을 모두 삭제
$ul.empty();
for(a of addressBook) {
const $li = $('<li>').
text(a.ano + ". " + a.irum + " : " + a.tel).appendTo($ul);
$('<button>').attr('class','delete')
.text('삭제').attr('data-ano',a.ano).appendTo($li);
}
}
$(document).ready(function() {
$ul = $('#list');
// app을 실행하면 addressBook, sequence를 localStorage에서 읽어온다
// localStorage의 경우 키가 존재하지 않으면 값은 null
if(localStorage.getItem('addressBook')!=null) {
addressBook = JSON.parse(localStorage.getItem('addressBook'));
sequence =
parseInt(JSON.parse(localStorage.getItem('sequence')));
printAddressBook();
}
$('#add').click(function() {
// 입력한 내용을 객체로 생성한다. ano는 1씩 증가하는 시퀀스로 처리
const a = {
ano: sequence++,
irum: $('#irum').val(),
tel: $('#tel').val()
};
// a와 sequence를 localStorage에 저장한 다음 화면을 갱신
addressBook.push(a);
localStorage.setItem('addressBook', JSON.stringify(addressBook));
localStorage.setItem('sequence', sequence);
printAddressBook();
$('#irum').val("");
$('#tel').val("");
});
$('#list').on('click', '.delete', function() {
// 버튼에 저장된 address번호를 읽어온다
const $ano = parseInt($(this).attr('data-ano'));
// addressNo배열의 모든 원소(각 i번째 원소)의 ano와 사용자가
// 선택한 버튼의 ano($ano)를 비교해 일치하면 원소를 삭제
for(let i=0; i<addressBook.length; i++) {
if(addressBook[i].ano===$ano) {
addressBook.splice(i, 1);
}
}
localStorage.setItem('addressBook', JSON.stringify(addressBook));
localStorage.setItem('sequence', sequence);
printAddressBook();
});
});
</script>
</head>
<body>
이름 : <input type="text" name="" id="irum"><br>
연락처 : <input type="text" name="" id="tel"><br>
<button id='add'>추가</button>
<hr>
<ul id='list'>
</ul>
</body>