HTML5 Storage 1 - Web Storage -

Hey guys this is Dougy and welcome to my HTML5 tutorial blog.
What I am going to do is that I'm going to introduce HTML5 to you with Google HTML5 presentation that was created by Marcin Wichary and modified by many people in the Google Chrome team. (http://slides.html5rocks.com/disclaimer.html)
I modified it a little bit to write on this blog.

Ya...You can get original presentation from  http://slides.html5rocks.com.
As I said that just I did small modification the presentation file to write on this blog and to learn HTML5.
I will add my experience during study the presentation.
I hope that you get a lot of things about HTML5 from my blog

갑자기 영어가 나왔죠?
HTML5를 공부하면서 한국 뿐만 아니라 외국인들도 제 블로그에 와서 새로운 것들을 얻어가서 도움이 됐으면 하는 마음에 이제부터 영어로도 설명을 좀 올리려고 합니다.
지금 올리는 소스는 Google 에서 만든 HTML5 프리젠테이션을 이 블로그에 올리려고 약간 수정한 겁니니다.
http://slides.html5rocks.com 에 가시면 원본을 보실 수 있습니다.
이 내용을 정리하면 HTML5에 어떤 기능들이 있는지 알기 쉽게 그리고 직접 눈으로 확인하면서 공부할 수 있을 것 같아서 제 블로그에 정리해 두려고 합니다.

JS

Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)

DownLoad below file to test it.

오늘 공부할 내용은 Web Storage 입니다.
위 text area 에 글자를 쓰고 save 버튼을 누른 후 다른 웹싸이트에 갔다가 다시 돌아와도 그 텍스트가 그대로 남아 있습니다.

You can download the file what I modified the Web Storage source code of the presentation.
아래 제가 위에 보이는 페이지만 따로 수정한 파일 입니다.
다운 받으셔서 브라우저에서 실행하시면 위 화면을 보실 수 있습니다.

HTML5LocalSessionStorage.html

P.S.
Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Working Well (O)
Safari 5.1.2                             - Working Well (O)
FireFox 9.0.1                          - Working Well (O)

Hey guys please let us know that this is working on your browser or not.
We need your name of the Browser and version also.
It will be very helpful for us if you share the information whether this is working on your mobile browser or not. If you can test it on your mobile browser.

Thanks.

제가 가지고 있는 웹 브라우저에서 테스트 한 결과 입니다.
IE 9.0 에서는 이 기능이 동작하지 않습니다.
그러니 이 기능을 테스트 하시려면 지원되는 브라우저를 다운 받아서 테스트 하셔야 합니다.

이 글은 보다 많은 분들과 정보를 공유하고 서로 도와가면서 기술을 익히려고 만들었습니다.

여러분들이 사용하시는 브라우저와 버전에서 동작이 잘 되는지 댓글에 남겨 주시면 저도 많은 공부가 될 것 같습니다.
그리고 여러분들이 사용하시는 모바일 브라우저에서 동작이 잘 되는지도 같이 공유해 주세요.

PC는 위에서처럼 브라우저와 버전 정보하고 작동 여부를 알려주시면 되고 모바일은 어떻게 해야할까요? 아이폰,안드로이드폰 여부하고 폰 모델명과 안드로이드 버전 정보도 있으면 좋겠고.. 브라우저 종류와 버전 정보도 있으면 좋겠네요.

앞으로 하나하나 기능별로 정리해서 글을 올릴건데요. 계속 정리해 나가면 구글에서 만든 튜토리얼에서 좀 더 발전된 튜토리얼이 만들어 질 수 있을거예요.

이게 소스 공유의 정신이라고 생각합니다.

그럼 많은 협조 부탁드립니다.