웹 스토리지
- 웹 프로그래밍/HTML
- 2016. 4. 29. 21:58
웹 스토리지란 ?
-실행 중인 웹 브라우저의 로컬 디스크 저장 공간을 의미한다. 즉 웹하드와 같이 원격에 위치한 저장 공간을 웹으로 사용하는 개념이 아니라 웹 브라우저를 실행하고 있는 로컬 컴퓨터의 저장 공간을 사용하여 데이터를 읽고 쓰는 개념이다. 웹 스토리지에는 로컴 스토리지와 세션 스토리지 두가지 종류의 스토리지가 있다.
-로컬 스토리지(localStorage)
로컬 스토리지 객체는 window.,localStorage 객체를 의미하며, 웹 사이트 도메인 단위로 별도 운영되고, 저장된 데이터의 유효 시간이 없는 구조로 처리된다.
로컨 스토리지 예제 코드
<!DOCTYPE HTML>
<html lang = "ko">
<head>
<meta charset = "utf-8"/>
</head>
<body>
<form>
학번 : <input type = "text" id = "number"><br/>
이름 : <input type = "text" id = "name"><br/><br/>
<input type = "button" onclick = "setData()" value = "저장"/>
<input type = "button" onclick = "removeData()" value = "전체 삭제"/>
<input type = "button" onclick = "viewData()" value = "전체 보기"/><br/><br/>
데이터목록</br>
<textarea id = "result"></textarea>
</form>
<script lang = "javascript">
function doclear()
{
document.getElementById("number").value="";
document.getElementById("name").value="";
}
function setData()
{
var key = document.getElementById("number");
var data = document.getElementById("name");
localStorage.setItem(key.value,data.value);
alert("데이터 저장이 완료되었습니다.");
doclear();
}
function removeData()
{
localStorage.clear();
alert("모든 데이터를 삭제하였습니다.")
}
function viewData()
{
var data = document.getElementById("result");
data.value = "";
for(var i = 0; i < localStorage.length; i++)
{
var number = localStorage.key(i);
data.value += localStorage[number] + ",";
}
}
</script>
</body>
</html>
파일명은 localsession.html로 저장을 하십니다. 그리고 나서 페이지로 들어가면 실행화면이 이렇게 나옵니다.
<실행화면>
이렇게 화면이 뜨게 됩니다. 그러면 학번과 이름을 입력해주시고 저장을 누르신 다음 페이지를 끄신 다음 다시 들어가 보면 이렇게 데이터가 지워지지 않고 계속해서 남아 있다는 것을 알 수 있게 됩니다.
이제는 세션 스토리지에 대해서 알아 보도록 합시다.
-세션 스토리지(sessionStorage)
sessionStrorage 객체 방식은 localStorage 객체 방식과 비슷하게 로컬 디스크를 사용하여 데이터를 도메인 단위로 별도 저장하지만 웹 브라우저의 종료와 더불어 데이터가 자동으로 소멸된다.
세션 스토리지 예제 코드
<!DOCUTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
</head>
<body>
<form>
학번 : <input type = "text" id = "number"/></br>
이름 : <input type = "text" id = "name"/></br></br>
<input type = "button" onclick = "setData()" value = "저장"/>
<input type = "button" onclick = "removeData()" value = "전체 삭제"/>
<input type = "button" onclick = "viewData()" value = "전체 보기"/></br></br>
데이터 목록</br>
<textarea id = "result" cols = "30" rows = "5"></textarea>
</form>
<script lang = "javascript">
function doclear()
{
document.getElementById("number").value = "";
document.getElementById("name").value = "";
}
function setData()
{
var key = document.getElementById("number");
var data = document.getElementById("name");
sessionStorage.setItem(key.value,data.value);
alert("데이터 저장이 완료되었습니다.");
doclear();
}
function removeData()
{
sessionStorage.clear();
alert("모든 데이터 값이 삭제되었습니다.");
}
function viewData()
{
var data = document.getElementById("result");
data.value = "";
for(var i = 0; i < sessionStorage.length; i++)
{
var number = sessionStorage.key(i);
data.value += sessionStorage[number] + ",";
}
}
</script>
</body>
</html>
<실행화면>
이렇게 실행화면이 뜨고 마찬가지로 학번과 이름을 입력을 하게 되면 목록에 그 정보가 뜨는 것을 확인 할 수 있습니다. 하지만 여기서 페이지를 끄고 다시 사이트에 들어와서 전체보기를 해보면 이전에 있던 데이터가 소멸된 것을 확인을 할 수 있게 됩니다.
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] HTML p 태그 – 단락 (0) | 2020.12.08 |
|---|---|
| [HTML] HTML 기본 웹 페이지 만들기 (0) | 2020.12.07 |
| [HTML] HTML 문서 구조 (0) | 2020.12.06 |
| [HTML] HTML 태그를 이용한 중첩 (0) | 2020.12.05 |
| [HTML] HTML – 시작하기 (1장) (0) | 2020.12.04 |
