HTML5 sessionStorage 세션 저장

sessionStorage HTML5 세션 저장 객체에 새로 추가된 기능으로, 동일한 창(또는 탭)의 데이터를 임시로 저장하는 데 사용됩니다. 창이나 탭을 닫으면 데이터가 삭제됩니다. 이번 글에서는 주로 sessionStorage(세션 스토리지) 사용법을 소개합니다. 추가, 수정, 삭제 등의 작업이 포함됩니다.

sessionStorage는 동일한 창(또는 탭) 데이터를 임시로 저장하는 데 사용되는 HTML5의 새로운 세션 저장 객체입니다. 창이나 탭을 닫으면 삭제됩니다.

이 개체는 JavaScript 언어로 window.sessionStorage 또는 sessionStorage를 통해 호출할 수 있습니다.

1.2 특징

1) 동일 출처 정책 제한. 서로 다른 페이지 간에 동일한 sessionStorage를 작동하려면 해당 페이지가 동일한 프로토콜, 동일한 호스트 이름 및 동일한 포트에 있어야 합니다. (IE 8 및 9는 프로토콜(HTTP 및 HTTPS) 및 포트 번호 요구 사항을 무시하고 동일한 호스트 이름을 기반으로만 데이터를 저장합니다.)

2) 단일 탭 제한. sessionStorage 작업은 단일 탭 페이지로 제한되며, 이 탭 페이지에서 동일한 원본 페이지에 액세스하여 sessionStorage 데이터를 공유할 수 있습니다.

3) 로컬에서만 보관하세요. sessionStorage의 데이터는 HTTP 요청과 함께 서버로 전송되지 않으며 로컬에서만 적용되며 탭을 닫은 후에는 데이터가 지워집니다. (크롬의 탭 복구 기능을 사용하면 seesionStorage의 데이터도 복구됩니다.)

4) 보관방법. sessionStorage의 저장 방식은 키와 값 방식을 채택합니다. value 값은 문자열 유형이어야 합니다. 문자열이 아닌 값을 전달하면 저장 중에 문자열로 변환됩니다. true 값은 "true"로 변환됩니다.

5) 저장 용량 제한: 브라우저마다 저장 용량 제한이 다르지만 대부분의 브라우저는 5MB 미만으로 제한합니다.

http://dev-test.nemikor.com/web-storage/support-test/

를 방문하여 브라우저의 저장 용량 한도를 테스트할 수 있습니다.

1.3 최소 브라우저 버전 지원

sessionStorage를 지원하는 최소 브라우저 버전: IE8, Chrome 5.

1.4 적합한 시나리오

sessionStorage는 SPA(단일 페이지 애플리케이션)에 매우 적합하며 각 비즈니스 모듈에서 값을 쉽게 전송할 수 있습니다.

2. 멤버

2.1 속성

readonly int sessionStorage.length : 다음에 저장되어 있음을 나타내는 정수를 반환합니다. sessionStorage 개체의 데이터 항목(키-값 쌍) 수입니다.

2.2 Method

문자열 sessionStorage.key(int index): 현재 sessionStorage 객체의 인덱스 번호에 대한 키 이름을 반환합니다. 그렇지 않은 경우 null을 반환합니다.

문자열 sessionStorage.getItem(string key): 키 이름에 해당하는 값을 반환합니다. 그렇지 않은 경우 null을 반환합니다.

void sessionStorage.setItem(string 키, 문자열 값): 이 메서드는 키와 값을 매개변수로 받아들이고 키-값 쌍을 스토리지에 추가합니다. 키가 있으면 해당 값을 업데이트합니다.

void sessionStorage.removeItem(문자열 key): sessionStorage 개체에서 지정된 키 이름(key)을 제거합니다.

void sessionStorage.clear() : sessionStorage 개체의 모든 항목을 지웁니다.

3. 예시

3.1 데이터 저장

3.1.1 setItem() 메소드를 사용하여 저장

sessionStorage.setItem(&#39;testKey&#39;,&#39;这是一个测试的value值&#39;); // 存入一个值

로그인 후 복사

3.1.2 속성을 통해 저장

sessionStorage[&#39;testKey&#39;] = &#39;这是一个测试的value值&#39;;

로그인 후 복사

3.2 데이터 읽기

3.2.1 getItem()을 통해 값 가져오기 method

sessionStorage.getItem(&#39;testKey&#39;); // => 返回testKey对应的值

로그인 후 복사

3.2.2 속성을 통해 값 가져오기

sessionStorage[&#39;testKey&#39;]; // => 这是一个测试的value值

로그인 후 복사

3.3 Json 객체 저장

sessionStorage는 Json 객체도 저장할 수 있습니다. 저장할 때 객체를 읽을 때 JSON.stringify()를 통해 텍스트 형식으로 변환합니다. JSON을 통해 구문 분석()은 텍스트를 다시 객체로 변환합니다.

var userEntity = {
    name: &#39;tom&#39;,
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem(&#39;user&#39;, JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem(&#39;user&#39;);
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

로그인 후 복사