[R]HTML5 웹 저장소(HTML5 Web Storage)

HTML web storage; better than cookies.

HTML 웹 저장소; 쿠키보다.

---

What is HTML Web Storage?

HTML Web Storage 란 무엇입니까?

With web storage, web applications can store data locally within the user's browser.

웹 저장소를 사용하면 웹 응용 프로그램이 사용자 브라우저에 로컬로 데이터를 저장할 수 있습니다.

Before HTML5, application data had to be stored in cookies, included in every server request. 

HTML5 이전에는 모든 서버 요청에 포함 된 애플리케이션 데이터를 쿠키에 저장해야했습니다. 

Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

웹 저장소는보다 안전하며 많은 양의 데이터를 웹 사이트 성능에 영향을 미치지 않고 로컬에 저장할 수 있습니다.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

쿠키와 달리 저장 용량 한도는 훨씬 크며 (최소 5MB) 정보는 서버로 전송되지 않습니다.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

웹 저장소는 출처별로 (도메인 및 프로토콜별로) 있습니다. 한 원점의 모든 페이지는 동일한 데이터를 저장하고 액세스 할 수 있습니다.

---

Browser Support

브라우저 지원

The numbers in the table specify the first browser version that fully supports Web Storage.

표의 숫자는 웹 저장소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

API
Web Storage	4.0	8.0	3.5	4.0	11.5

---

HTML Web Storage Objects

HTML 웹 저장 객체

HTML web storage provides two objects for storing data on the client:

HTML 웹 저장소는 클라이언트에 데이터를 저장하기위한 두 가지 객체를 제공합니다.

window.localStorage - stores data with no expiration date

window.localStorage 만료일이없는 데이터를 저장합니다.

window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

window.sessionStorage - 하나의 세션에 대한 데이터를 저장합니다 (브라우저 탭을 닫으면 데이터가 손실됩니다)

Before using web storage, check browser support for localStorage and sessionStorage:

웹 저장소를 사용하기 전에 localStorage 및 sessionStorage에 대한 브라우저 지원을 확인하십시오.

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

---

The localStorage Object

localStorage 개체

The localStorage object stores the data with no expiration date. 

localStorage 개체는 만료 날짜가없는 데이터를 저장합니다. 

The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

브라우저를 닫을 때 데이터가 삭제되지 않으며 다음 날, 1 주일 또는 1 년 동안 사용할 수 있습니다.

Example

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Example explained:

예제 설명 :

Create a localStorage name/value pair with name="lastname" and value="Smith"

name = "lastname"및 value = "Smith"인 localStorage 이름 / 값 쌍을 만듭니다.

Retrieve the value of "lastname" and insert it into the element with id="result"

"lastname"값을 검색하여 id = "result"를 가진 요소에 삽입하십시오.

The example above could also be written like this:

위의 예제는 다음과 같이 작성할 수도 있습니다.

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for removing the "lastname" localStorage item is as follows:

"lastname"localStorage 항목을 제거하는 구문은 다음과 같습니다.

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

참고 : 이름 / 값 쌍은 항상 문자열로 저장됩니다. 필요한 경우 다른 형식으로 변환하십시오!

The following example counts the number of times a user has clicked a button. 

다음 예제는 사용자가 버튼을 클릭 한 횟수를 계산합니다. 

In this code the value string is converted to a number to be able to increase the counter:

이 코드에서는 값 문자열을 숫자로 변환하여 카운터를 늘릴 수 있습니다.

Example

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
 

---

The sessionStorage Object

sessionStorage 객체

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. 

sessionStorage객체는 로컬 스토리지에 오브젝트와 동일한 것을 제외하고 는 하나 개의 세션에 대한 데이터를 저장하고있다. 

The data is deleted when the user closes the specific browser tab.

사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제됩니다.

The following example counts the number of times a user has clicked a button, in the current session:

다음 예제는 현재 세션에서 사용자가 버튼을 클릭 한 횟수를 계산합니다.

Example

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
 

---

출처 : https://www.w3schools.com/html/html5_webstorage.asp