From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/storage/index.html | 107 ++++++++++++++++++++ files/ko/web/api/storage/key/index.html | 74 ++++++++++++++ files/ko/web/api/storage/length/index.html | 68 +++++++++++++ files/ko/web/api/storage/removeitem/index.html | 134 +++++++++++++++++++++++++ 4 files changed, 383 insertions(+) create mode 100644 files/ko/web/api/storage/index.html create mode 100644 files/ko/web/api/storage/key/index.html create mode 100644 files/ko/web/api/storage/length/index.html create mode 100644 files/ko/web/api/storage/removeitem/index.html (limited to 'files/ko/web/api/storage') diff --git a/files/ko/web/api/storage/index.html b/files/ko/web/api/storage/index.html new file mode 100644 index 0000000000..26ee7125ad --- /dev/null +++ b/files/ko/web/api/storage/index.html @@ -0,0 +1,107 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - Reference + - Storage + - Web Storage +translation_of: Web/API/Storage +--- +
{{APIRef("Web Storage API")}}
+ +

Web Storage API의 Storage 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.

+ +

도메인의 세션 저장소를 수정해야 하면 {{domxref("Window.sessionStorage")}}에, 로컬 저장소를 수정해야 하면 {{domxref("Window.localStorage")}}에 접근하세요.

+ +

속성

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Storage 객체에 저장된 데이터 항목의 수를 반환합니다.
+
+ +

메서드

+ +
+
{{domxref("Storage.key()")}}
+
주어진 숫자 n에 대하여 저장소의 n번째 항목 키를 반환합니다.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
주어진 키에 연결된 값을 반환합니다.
+
{{domxref("Storage.setItem()")}}
+
키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.
+
{{domxref("Storage.removeItem()")}}
+
주어진 키를 저장소에서 제거합니다.
+
{{domxref("Storage.clear()")}}
+
저장소의 모든 키를 저장소에서 제거합니다.
+
+ +

예제

+ +

아래 코드에서는 localStorage에 접근해 Storage 객체를 접근합니다. 우선 !localStorage.getItem('bgcolor')를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 {{domxref("Storage.getItem()")}}으로 회수한 후 setStyles()로 페이지 스타일을 바꿉니다. 데이터가 없으면 populateStorage() 함수를 호출하고, 그 안에서는 {{domxref("Storage.setItem()")}}을 통해 데이터를 설정합니다. 그 후에는 동일하게 setStyles()를 사용합니다.

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

참고: 실제 작동 예제는 저희의 Web Storage Demo에서 볼 수 있습니다.

+
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#storage', 'Storage')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Storage")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/storage/key/index.html b/files/ko/web/api/storage/key/index.html new file mode 100644 index 0000000000..7583b6e49f --- /dev/null +++ b/files/ko/web/api/storage/key/index.html @@ -0,0 +1,74 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - 로컬 스토리지 + - 세션 스토리지 + - 웹 스토리지 +translation_of: Web/API/Storage/key +--- +

{{APIRef("Web Storage API")}}

+ +

{{domxref("Storage")}} 인터페이스의 key() 메서드는 숫자 n이 전달되면 Storage의 n번째 key 이름을 반환합니다. key의 순서는 user-agent에 의해 정의되므로 이 순서에 의존성이 있어서는 안됩니다.

+ +

문법

+ +
var aKeyName = storage.key(index);
+ +

Parameters

+ +
+
index
+
반환받으려하는 key의 번호를 나타내는 정수. 이 정수는 0부터 시작하는 인덱스입니다.
+
+ +

Return value

+ +

key 이름을 포함한 {{domxref("DOMString")}} 입니다.

+ +

예제

+ +

다음 함수는 localStorage 의 key들을 반복합니다.

+ +
function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}
+ +

다음 함수는 localStorage 의 key들을 반복하고 각 key에 설정된 값들을 가져옵니다.

+ +
for(var i =0; i < localStorage.length; i++){
+   console.log(localStorage.getItem(localStorage.key(i)));
+}
+ +
+

Note: 실제로 쓰이는 예제를 보려면 우리의 Web Storage Demo 를 참조하세요.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}{{Spec2('HTML WHATWG')}} 
+ +

브라우저 호환성

+ + + +

{{Compat("api.Storage.key")}}

+ +

See also

+ +

Using the Web Storage API

diff --git a/files/ko/web/api/storage/length/index.html b/files/ko/web/api/storage/length/index.html new file mode 100644 index 0000000000..53b092b939 --- /dev/null +++ b/files/ko/web/api/storage/length/index.html @@ -0,0 +1,68 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API + - Property + - Read-only + - Reference + - Storage + - Web Storage +translation_of: Web/API/Storage/length +--- +
{{APIRef("Web Storage API")}}
+ +

{{domxref("Storage")}} 인터페이스의 length 읽기 전용 속성은 Storage 객체에 저장된 데이터 항목의 수를 반환합니다.

+ +

구문

+ +
length = storage.length;
+ +

반환 값

+ +

Storage 객체에 저장된 항목의 수.

+ +

예제

+ +

다음의 함수는 현재 도메인의 로컬 저장소에 세 개의 항목을 추가한 후 저장소 항목의 수를 반환합니다.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  return localStorage.length; // Should return 3
+}
+ +
+

참고: 실제 사용 예제를 보시려면 저희의 Web Storage Demo를 방문하세요.

+
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Storage.length")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/storage/removeitem/index.html b/files/ko/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..e9afd96922 --- /dev/null +++ b/files/ko/web/api/storage/removeitem/index.html @@ -0,0 +1,134 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - 메소드 + - 스토리지 + - 웹 스토리지 + - 참고 +translation_of: Web/API/Storage/removeItem +--- +

{{APIRef("Web Storage API")}}

+ +

{{domxref("Storage")}} 인터페이스의 removeItem() 메소드에 키 이름을 파라미터로 전달하면 스토리지에서 해당 키를 삭제합니다.

+ +

문법

+ +
storage.removeItem(keyName);
+ +

파라미터

+ +
+
keyName
+
삭제하고자 하는 키 이름({{domxref("DOMString")}}).
+
+ +

반환값

+ +

반환값 없음.

+ +

예제

+ +

아래의 함수는 로컬 스토리지에 3 개의 데이터 아이템을 생성한 후 그 중 하나를 삭제합니다.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +
+

주: 실 사용 예제는 Web Storage Demo를 참고하시기 바랍니다.

+
+ +

사양

+ + + + + + + + + + + + + + +
사양상태비고
{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}{{Spec2('Web Storage')}} 
+ +

브라우저 호환성

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

모든 브라우저가 다양한 지원 수준의 localStorage와 sessionStorage를 제공합니다. 이 곳에서 다양한 브라우저에서의 storage 지원과 관련된 상세항 사항을 확인할 수 있습니다.

+ +
+

주: iOS 5.1부터 모바일 Safari는 localStorage 데이터를 캐시 폴더에 저장하며, 공간 부족 등의 사유로 OS의 요청에 의해 가끔씩 지워질 수 있습니다.

+
+ +

같이 보기

+ +

Web Storage API 사용하기

-- cgit v1.2.3-54-g00ecf