html5 안내서 -5. 웹 스토리지를 사용하여 키 값 쌍의 데이터를 저장

저자：Eve Cole 업데이트 시간：2025-04-11 13:00:04

이 레슨의 내용은 웹 스토리지를 소개하는 것입니다. 웹 스토리지는이를 사용하여 키 값 쌍의 데이터를 브라우저에 저장합니다. 기능적으로 이전 쿠키와 비슷하지만 더 좋고 저장된 데이터가 클 수 있습니다. 웹 스토리지에는 두 가지 유형의 웹 스토리지가 있습니다. 로컬 스토리지 및 세션 스토리지는 가시성 및 수명주기가 다르다는 점을 제외하고 동일한 구현 메커니즘을 사용합니다.

1. 로컬 스토리지를 사용하십시오

우리는 LocalStorage 객체를 사용하여 로컬 스토리지에 액세스하는데, 이는 스토리지 객체를 반환합니다.이 객체는 키 값 쌍의 데이터를 저장하는 데 사용됩니다. 다음 속성과 방법이 있습니다.

CLEAR () : 키 값 쌍 데이터를 명확하게 저장합니다.

getItem (<key>) : 키를 통해 값을 얻으십시오.

Key (<edulture) : 인덱스를 통해 키 값을 얻습니다.

길이 : 키 값 쌍의 수를 반환합니다.

removeItem (<key>) : 키를 통해 지정된 데이터를 제거합니다.

setitem (<key>, <value>) : 키 값 쌍을 추가하십시오. 지정된 키의 키 값 쌍이 존재하면 업데이트 작업이 구현됩니다.

[<key>] : 키를 사용하여 배열 첨자를 통해 지정된 값을 얻습니다.

스토리지 객체를 사용하면 키 값 쌍 데이터를 문자열 형태로 저장할 수 있습니다. 키는 고유하므로 SetItem 메소드를 사용하여 키 값 쌍을 추가하면 키 값이 이미 존재하면 업데이트 작업이 구현됩니다. 다음 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

몸> *{float : 왼쪽;}

표 {Border-Collapse : 붕괴; 마진-왼쪽 : 50px;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

입력 {테두리 : 얇은 솔리드 블랙; 패딩 : 2px;}

레이블 {min-width : 50px; 디스플레이 : 인라인-블록; 텍스트-정렬 : 오른쪽;}

#countmsg, #buttons {margin-left : 50px; margin-top : 5px; margin-bottom : 5px;}

</스타일>

</head>

<body>

<div>

<라벨> 키 : </label> <입력 ID = "키"자리 표시기 = "키를 입력"/> </div>

<div>

<라벨> 값 : </label> <입력 id = "value"자리 표시기 = "값을 입력"/> </div>

<button id = "clear"> clear </button>

</div>

<p id = "countmsg"> <span id = "count"> </span> 항목이 있습니다

</div>

<tr>

</tr>

</테이블>

<cript>

displayData ();

var buttons = document.getElementsByTagName ( 'button');

for (var i = 0; i <buttons.length; i ++) {

버튼 [i] .onclick = handlebuttonpress;

}

함수 핸들 부트 턴 프레스 (e) {

스위치 (e.target.id) {

CASE 'ADD':

var key = document.getElementById ( 'key'). 값;

var value = document.getElementById ( 'value'). 값;

localStorage.setItem (키, 값);

부서지다;

CASE 'CLEAR':

localStorage.clear ();

부서지다;

}

displayData ();

}

함수 displayData () {

var tableElement = document.getElementById ( 'data');

tableElement.innerhtml = '';

var itemcount = localstorage.length;

document.getElementById ( 'count'). innerHtml = itemCount;

for (var i = 0; i <itemcount; i ++) {

var key = localstorage.key (i);

var val = localStorage.getItem (키);

tableElement.innerhtml + = '<tr> <th>' + key + ': </th> <td>' + val + '</td> </tr>';

}

</스크립트>

</body>

</html>

실행중인 결과를 살펴 보겠습니다 .

브라우저는 사용자가 삭제하지 않으면 LocalStorage를 통해 생성 된 데이터를 삭제할 수 없습니다.

2. 스토리지 이벤트를 듣습니다

로컬 스토리지를 통해 저장된 데이터는 동일한 원천 문서로 표시됩니다. 예를 들어, 동일한 URL 주소에 액세스하기 위해 두 개의 크롬 브라우저를 열면 다른 페이지에서 생성 된 로컬 스토리지도 다른 페이지에 표시됩니다. 그러나 다른 브라우저 (예 : Firefox)와 동일한 URL 주소를 열면 소스가 다른 경우 로컬 스토리지가 보이지 않습니다. 스토리지 이벤트는 스토리지 컨텐츠의 변경 사항을 듣는 데 사용됩니다. 어떤 속성이 포함되어 있는지 보자.

키 : 변경된 키 값을 반환합니다.

OldValue : 키 값이 변경되기 전에 값을 반환합니다.

NewValue : 키 값이 변경된 새 값 값을 반환합니다.

URL : 변경된 URL 주소;

STORAGEAREA : 변경된 스토리지 개체 (로컬 스토리지 또는 세션 스토리지)를 반환합니다.

아래 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

표 {Border-Collapse : Collapse;}

Th, td {패딩 : 4px;}

</스타일>

</head>

<body>

<tr>

<Th> OldValue </th>

<Th> NewValue </th>

<th> Storagearea </th>

</tr>

</테이블>

<cript>

var tableElement = document.getElementById ( 'data');

Window.onstorage = function (e) {

var row = '<tr>';

row + = '<td>' + e.key + '</td>';

row + = '<td>' + e.olevalue + '</td>';

row + = '<td>' + e.newvalue + '</td>';

row + = '<td>' + e.url + '</td>';

row + = '<td>' + (e.storagearea == LocalStorage) + '</td> </tr>';

tableElement.innerhtml += 행;

}

</스크립트>

</body>

</html>

예 1에서는 저장 데이터를 추가, 삭제 및 수정하며 예제 2 페이지에 표시됩니다. 예제 2는 크롬 브라우저에서 일반적으로 실행되며 Firefox는 응답하지 않으며 다른 브라우저는이를 테스트하지 않습니다.

실행 결과 :

3. 세션 스토리지를 사용하십시오

세션 스토리지는 접근성이 현재 페이지로 제한되어 있고 페이지가 닫힌 후 사라진다는 점을 제외하고 사용중인 로컬 스토리지와 동일합니다. SessionStorage를 통해 액세스합니다.

<! doctype html>

<html>

<헤드>

<스타일>

몸> *{float : 왼쪽;}

표 {Border-Collapse : 붕괴; 마진-왼쪽 : 50px;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

입력 {테두리 : 얇은 솔리드 블랙; 패딩 : 2px;}

레이블 {min-width : 50px; 디스플레이 : 인라인-블록; 텍스트-정렬 : 오른쪽;}

#countmsg, #buttons {margin-left : 50px; margin-top : 5px; margin-bottom : 5px;}

</스타일>

</head>

<body>

<div>

<라벨> 키 : </label> <입력 ID = "키"자리 표시기 = "키를 입력"/> </div>

<div>

<라벨> 값 : </label> <입력 id = "value"자리 표시기 = "값을 입력"/> </div>

<button id = "clear"> clear </button>

</div>

<p id = "countmsg"> <span id = "count"> </span> 항목이 있습니다

</div>

<tr>

</tr>

</테이블>

<cript>

displayData ();

var buttons = document.getElementsByTagName ( "버튼");

for (var i = 0; i <buttons.length; i ++) {

버튼 [i] .onclick = handlebuttonpress;

}

함수 핸들 부트 턴 프레스 (e) {

스위치 (e.target.id) {

CASE 'ADD':

var key = document.getElementById ( "키"). 값;

var value = document.getElementById ( "value"). 값;

SessionStorage.setItem (키, 값);

부서지다;

CASE 'CLEAR':

SessionStorage.clear ();

부서지다;

}

displayData ();

}

함수 displayData () {

var tableElement = document.getElementById ( 'data');

tableElement.innerhtml = '';

var itemCount = sessionStorage.length;

document.getElementById ( 'count'). innerHtml = itemCount;

for (var i = 0; i <itemcount; i ++) {

var key = sessionstorage.key (i);

var val = sessionstorage.getItem (키);

tableElement.innerhtml + = "<tr> <th>" + key + ": </th> <td>" + val + "</td> </tr>";

}

</스크립트>

</body>

</html>

실행 효과 :

예 3에서 변경하면 예제 2의 페이지가 변경되지 않습니다.

요약 :

SessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용되며 동일한 세션의 페이지에서만 액세스 할 수 있으며 세션이 완료된 후에는 데이터가 파괴됩니다. 따라서 SessionStorage는 지속적인 로컬 스토리지가 아니라 세션 수준 스토리지 일뿐입니다.

LocalStorage는 영구적 인 로컬 스토리지에 사용되며 데이터가 적극적으로 삭제되지 않으면 만료되지 않습니다.

웹 스토리지와 쿠키의 차이점 : 웹 스토리지의 개념은 쿠키와 유사하므로 차이점은 더 큰 용량 저장을 위해 설계되었다는 것입니다. 쿠키의 크기는 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송되어 대역폭이 보이지 않습니다. 또한 쿠키는 지정된 범위 여야하며 도메인에서 호출 할 수 없습니다. 또한 웹 스토리지에는 setitem, getitem, remobitem, clear 및 기타 방법이 있습니다. 쿠키와 달리 프론트 엔드 개발자는 SetCookies와 GetCookies를 캡슐화해야합니다. 또한 웹 스토리지의 각 도메인 (하위 도메인 포함)에는 독립적 인 저장 공간이 있으며 각 스토리지 공간에는 완전히 독립적이므로 데이터 혼동이 발생하지 않습니다.

그러나 쿠키도 필수 불가결합니다. 쿠키의 기능은 서버와 상호 작용하는 것이며 HTTP 사양의 일부로 존재하는 반면 웹 스토리지는 데이터를 로컬에서 저장하기 위해 만 만들어집니다.

소스 코드 다운로드