HTML5 Web Storage – localStorage , sessionStorage

Web Storage?

HTML5에는 웹사이트 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage스펙이 포함됨.
키-값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 심플한 패턴.
종류는 2가지가 있는데,
– localStorage: 영구저장소
– sessionStorage: 임시저장소
처럼 데이터의 지속성을 구별하여 사용할 수 있다.
브라우저 지원 현황을 보면 현재 오페라 미니 빼고 모두 지원한다.

쿠키와의 차이점

  • 쿠키는 맛있다.
  • 쿠키는 매번 서버로 전송된다.
  • Web storage는 저장된 데이터가 클라에 존재할 뿐 서버전송은 이루어지지 않는다(=>네트워크 트래픽 비용을 줄여주는 중요한 장점)
  • 단순 문자열을 넘어 (스크립트)객체정보를 저장 가능.
  • 체계적으로 구조화된 객체 저장 가능.(브라우저 지원여부 확인 필요)
  • 쿠키와 다르게 용량 제한이 없다.
  • 영구 데이터 저장이 가능하다.
  • 로컬스토리지는 브라우저 종료해도 데이터 보관, 세션스토리지는 데이터 지움.

사용법

localStorage.setItem('foo', 'bar');
localStorage.getItem('foo'); //'bar'
localStorage['foo']; //'bar'

localStorage.removeItem(키);
localStorage.clear(); //모두 지움
localStorage.length; //저장된 키의 개수
localStorage.key(값); //값으로 키를 찾음

window.addEventListener('storage', function(e){ //이벤트 처리
// do sth
}, false);
  • key와 value 모두 String으로 저장된다.
  • getItem으로 값 못찾으면, 에러 발생이 아니고 null리턴.
  • 대부분의 브라우저에서는 다른 윈도우에서 로컬 스토리지의 데이터를 변경했을 때 이벤트가 발생한다.
    즉, 같은 창에 이벤트를 추가하고, localStroage의 값을 변경해도 이벤트가 발생하지 않는다.
    아마도, 자신의 window에서는 변경된 상황을 알고 있을 것이라는 가정 때문인가 보다. 링크

세션스토리지 예제

// Get the text field that we're going to track
var field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});

Refer

MDN Web Storage API
HTML5 Web Storage
HTML5 LocalStorage 살펴보기
MDN Storage

Advertisements

HTML5 Boilerplate로 web frontend 뼈대짜기

HTML5 boilerplate는 빠르고, 튼튼하며, 유연한 웹사이트 제작을 도와주는 템플릿이다.
html5웹을 만드는 첫 단계 뼈대를 제공해준다.

1
https://html5boilerplate.com/

What is it?

다운을 받아 index.html을 보면
– html5에 최적화된 뼈대
– 간단한 ie대응
– 파비콘
– jQuery
– normalize.css (기본 CSS리셋)
– modernizr (HTML5의 새로운 태그들을 IE8이하에서 인식시키기)
– google analytics 코드스니펫
과 같이 웹 frontend 제작에 널리 쓰이는 라이브러리들이 모아져있다.

Refer

html5 bolierplate

크로스 브라우징을 위한 HTML5 Boilerplate + 추가 스크립트 by @aliencube

HTML5 시맨틱 태그

  • 시맨틱 태그
    • 태그를 통해서 의미를 전달. 소스를 보면 코드가 한눈에 쏙!
  • section
    • 문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌때 사용.
    • 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조 갖지 않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향 안줌.
    • 신문기사와 같은 배포형은 section이 아닌 article 사용
    • section에 스타일이나 스크립트를 지정하려 한다면 div를 사용.
  • article
    • 문서내의 독립적인 글, 블로그 글이나 뉴스 본문등을 구성하는 섹션.
    • article 안에서 header, footer와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관없음
    • article요소가 중첩될경우 중첩된 article요소는 서로 상호관련이 있어야 한다.
      • ex) 블로그 글을 나타내는 article요소 내부에 블로그 방문자 댓글이나 의견을 article요소로 넣을 수 있다.
  • aside
    • 섹션의 내용과 관련없진 않지만 분리되어도 문제없는 섹션. 주로 사이드바 형태로 표현.
    • aside태그는 본문 내용에 대한 추가적인 설명할때 사용하는 태그. 본문과 별도로 추가적인 언급을 할때 사용.
  • header
    • 머릿말 태그, 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정.
  • footer
    • 페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분.
  • menu
    • 페이지 내 기능을 하는 버튼/링크의 모음(대표적으로 툴바)을 나타낸다.
    • type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.
  • nav
    • 외부 페이지로 연결되는 링크의 모음