HTML5 기본 가이드

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 클라이언트 스토리지

HTML5 쿠키보다 더 좋은 로컬 스토리지 방식인 클라이언트 스토리지. HTML 사용5사용자의 브라우징 데이터를 로컬 스토리지에 저장할 수 있습니다.

HTML이 무엇인가요?5 웹 클라이언트 스토리지?

HTML 사용5사용자의 브라우징 데이터를 로컬 스토리지에 저장할 수 있습니다.

早些时候, 로컬 스토리지는 쿠키를 사용했습니다. 하지만 웹 스토리지는 더욱 안전하고 빠른 것이 필요했습니다. 이 데이터는 서버에 저장되지 않으며, 이 데이터는 사용자가 웹사이트 데이터를 요청할 때만 사용됩니다. 또한, 웹사이트 성능에 영향을 미치지 않고 많은 데이터를 저장할 수 있습니다.

데이터는 키/값 대가 존재하면, 웹 페이지 데이터는 해당 웹 페이지만이 접근 및 사용할 수 있습니다.

브라우저 지원

Internet Explorer 8+, Firefox, Opera, Chrome, 및 Safari는 Web 저장을 지원합니다.

주의: Internet Explorer 7 그리고 더 이전 IE 버전은 web 저장을 지원하지 않습니다.

localStorage와 sessionStorage　

클라이언트에서 데이터를 저장하는 두 가지 객체는 다음과 같습니다:

localStorage - 전체 웹사이트 데이터를 장기적으로 저장하는 데 사용되며, 저장된 데이터는 만료 시간이 없으며, 수동으로 제거할 때까지 저장됩니다.
sessionStorage - 같은 창(또는 탭)에서 데이터를 일시적으로 저장하는 데 사용되며, 창이나 탭을 닫았을 때 이 데이터가 제거됩니다.

web 저장을 사용하기 전에, 브라우저가 localStorage와 sessionStorage를 지원하는지 확인해야 합니다:

예제

if(typeof(Storage)!=="undefined")
{
　　　　//　네! localStorage와 sessionStorage 객체를 모두 지원합니다!
　　　　//　일부 코드.....
} else {
　　　　//　죄송합니다! web 저장을 지원하지 않습니다.
}

localStorage 객체

localStorage 객체에 저장된 데이터는 시간 제한이 없습니다. 다음날, 다음 주 또는 다음 해에도 데이터는 여전히 사용할 수 있습니다.

예제

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "기본教程网";
　　document.getElementById("result").innerHTML = "웹사이트 이름："　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="죄송합니다.您的浏览器不支持web存储。";
}
</script>
</body>
</html>

테스트를 해보세요 ‹/›

예제 해석:

key="sitename"과 value="기본教程网"을 사용하여 localStorage 키를 생성합니다./값 대
"sitename"의 값을 검색한 후 그 데이터를 id="result"의 요소에 삽입합니다.

위 예제와 같이 작성할 수도 있습니다:

예제

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<script>
//　저장
localStorage.sitename = "기본教程网";
//　검색
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

테스트를 해보세요 ‹/›

localStorage에서 "sitename"을 제거합니다:

예제

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

테스트를 해보세요 ‹/›

localStorage나 sessionStorage를 가리든지 어떤 경우에도 사용할 수 있는 API는 같습니다. 일반적으로 사용하는 몇 가지 API가 있습니다. (localStorage 예로 들어):

데이터를 저장한다: localStorage.setItem(key,value);
데이터를 읽는다: localStorage.getItem(key);
단일 데이터를 지운다: localStorage.removeItem(key);
모든 데이터를 지운다: localStorage.clear();
특정 인덱스의 키를 가져옵니다: localStorage.key(index);

ヒント: 키/값은 일반적으로 문자열로 저장되며, 필요에 따라 형식을 변환할 수 있습니다.

아래의 예제는 사용자가 버튼을 클릭한 횟수를 보여줍니다.

코드에서 문자열 값이 숫자로 변환됩니다:

예제

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　　　　　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="你已经点击了按钮　"　+　localStorage.clickcount　+　"번";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="죄송합니다.您的浏览器不支持web存储。";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">클릭하세요! </button></p>
<div id="result"></div>
<p>이 버튼을 클릭하여 카운터 증가를 확인합니다.</p>
<p>브라우저 탭(또는 창)을 닫고 이 페이지를 다시 엽니다. 카운터는 계속 카운팅할 것입니다(재설정되지 않습니다).</p>
</body>
</html>

테스트를 해보세요 ‹/›

sessionStorage 객체

sessionStorage 메서드는 특정 세션에 데이터를 저장합니다. 사용자가 브라우저 창을 닫으면 데이터가 지워집니다.

sessionStorage를 생성하고 접근하는 방법:

예제

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="이 회의에서 이미 버튼을 클릭했습니다"　+　sessionStorage.clickcount　+　"번";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="죄송합니다. 브라우저는 web 저장을 지원하지 않습니다";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">클릭하세요! </button></p>
<div id="result"></div>
<p>이 버튼을 클릭하여 카운터 증가를 확인합니다.</p>
<p>브라우저 탭(또는 창)을 닫고 이 페이지를 다시 엽니다. 카운터가 초기화됩니다.</p>
</body>
</html>

테스트를 해보세요 ‹/›

Web Storage를 사용하여 간단한 웹사이트 목록 프로그램 개발

웹사이트 목록 프로그램은 다음 기능을 구현합니다：

웹사이트 이름, 주소를 입력하여 웹사이트 이름으로 key를 localStorage에 저장할 수 있습니다；
웹사이트 이름에 따라 주소를 검색합니다；
현재 저장된 모든 웹사이트를 나열합니다；

다음 코드는 데이터 저장 및 검색에 사용됩니다：

save()과 find() 메서드

예제

//데이터 저장　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("추가되었습니다");
}
//데이터 찾기　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site　+　"의 주소는:"　+　sitename;　　
}

완전한 예제를 다음과 같이 보여줍니다：

예제

!DOCTYPE　html
<html>　　
<head>　　
　　　　<meta　charset="utf-8">　　
　　　　<title>HTML5로컬 스토리지에 대한 Web Storage 편</title>　　
</head>　　
<body>　　
　　　　<div　style="border:　2px　dashed　#ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">웹사이트 이름(key)：</label>　　
　　　　　　　　<input　type="text"　id="sitename"　name="sitename"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">웹사이트 주소(value)：</label>　　
　　　　　　　　<input　type="text"　id="siteurl"　name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input　type="button"　onclick="save()"　value="새 기록 추가"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">웹사이트 이름 입력: </label>　　
　　　　　　　　<input　type="text"　id="search_site"　name="search_site"/>}}　　
　　　　　　　　<input　type="button"　onclick="find()"　value="검색 웹사이트"/>}}　　
　　　　　　　　<p　id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　localStorage에 저장된 모든 데이터를 로드합니다
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//데이터 저장　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("추가되었습니다");
　　　　}
　　　　//데이터 찾기　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site　+　"의 주소는:"　+　siteurl;　　
　　　　}
　　　　//localStorage에 저장된 모든 객체를 추출하고 화면에 표시합니다
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border=&"39;1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML　=　"데이터가 비어 있습니다……";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

테스트를 해보세요 ‹/›

실제 효과 캡처화:

이 예제는 간단한 localStorage 저장과 검색을 보여줍니다. 많은 경우에는 저장된 데이터가 더 복잡할 수 있습니다。

그래서 JSON.stringify를 사용하여 객체 데이터를 저장합니다. JSON.stringify는 객체를 문자열로 변환할 수 있습니다。

예제

var site = new Object;
...
var str = JSON.stringify(site);　//　객체를 문자열로 변환합니다

이제 JSON.parse 메서드를 사용하여 문자열을 JSON 객체로 변환합니다：

예제

var site = JSON.parse(str);

JavaScript 구현 코드：

save()과 find() 메서드

예제

//데이터 저장　　
function save(){　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　객체를 문자열로 변환합니다
　　　　localStorage.setItem(site.keyname,str);　　
　　　　alert("저장 성공");
}　　
//데이터 찾기　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site　+　"의 사이트이름은:"　+　site.sitename　+　", 웹사이트는:"　+　site.siteurl;　　
}

완전한 예제는 다음과 같습니다：

예제

!DOCTYPE　html
<html>　　
<head>　　
　　　　<meta　charset="utf-8">　　
　　　　<title>HTML5로컬 스토리지에 대한 Web Storage 편</title>　　
</head>　　
<body>　　
　　　　<div　style="border:　2px　dashed　#ccc;width:320px;text-align:center;">
　　　　　　　　<label　for="keyname">별명(key):</label>　　
　　　　　　　　<input　type="text"　id="keyname"　name="keyname"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label　for="sitename">웹사이트 이름：</label>　　
　　　　　　　　<input　type="text"　id="sitename"　name="sitename"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label　for="siteurl">웹 주소：</label>　　
　　　　　　　　<input　type="text"　id="siteurl"　name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input　type="button"　onclick="save()"　value="새 기록 추가"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label　for="search_phone">별명(key) 입력：</label>　　
　　　　　　　　<input　type="text"　id="search_site"　name="search_site"/>}}　　
　　　　　　　　<input　type="button"　onclick="find()"　value="검색 웹사이트"/>}}　　
　　　　　　　　<p　id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//데이터 저장　　
　　　　function save(){　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　객체를 문자열로 변환합니다
　　　　　　　　localStorage.setItem(site.keyname,str);　　
　　　　　　　　alert("저장 성공");
　　　　}　　
　　　　//데이터 찾기　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site　+　"의 사이트이름은:"　+　site.sitename　+　", 웹사이트는:"　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//localStorage에 저장된 모든 객체를 추출하고 화면에 표시합니다
　　　　//　확인하십시오. 저장된 keyname에 대한 값이 변환 객체가 아니면 JSON.parse는 오류를 발생시킵니다
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border=&"39;1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>별명</td><td>사이트이름</td><td>웹사이트</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "데이터가 비어 있습니다...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

테스트를 해보세요 ‹/›

예제에서 loadAll이 모든 저장된 데이터를 출력했습니다. localStorage에 저장된 데이터가 JSON 형식이 되어야 합니다. 아니라면 JSON.parse(str)이 오류를 보여줍니다.

출력 결과 표시:

HTML 5 로컬 데이터베이스 HTML5 의미 요소