HTML5의 sessionStorage 객체에 대한 심층적인 이해

이 글의 내용은 HTML5의 sessionStorage 객체에 대한 심층적인 이해입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

HTML5 sessionStorage 세션 저장

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

Directory

1. 소개

　1.1 설명

　1.2 기능

　1.3 브라우저 최소 버전 지원

　1.4 시나리오에 적합

2.　2.2 방법

3. 예시

　3.1 데이터 저장

　3.2 데이터 읽기

　3.3 Json 객체 저장

1. 소개

1.1 설명

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('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 속성을 통해 저장

sessionStorage['testKey'] = '这是一个测试的value值';

3.2 데이터 읽기

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

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

3.2.2 속성을 통해 값 가져오기

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

3.3 Json 객체 저장

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

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

관련 권장 사항:

sessionStorage는 json 개체를 저장합니다

sessionStorage를 사용하여 json 개체를 저장하고 가져옵니다.

sessionStorage 로컬 저장소 데이터 인스턴스

위 내용은 HTML5의 sessionStorage 객체에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!