전경의 페이지는 데이터베이스에 데이터를 저장할 필요가 없지만, 데이터를 다음 페이지로 전달해야 합니다. 여기서 데이터 임시 저장이 필요합니다. 프론트엔드에서 캐시를 사용하는 것.
유사점:
1. 기능은 동일하며, sessionStorage와 localStorage 모두 클라이언트에 임시 정보를 저장하는 데 사용되는 객체입니다.
2. 스토리지 콘텐츠 유형: 두 경우 모두 문자열 유형 데이터를 저장합니다.
3. 데이터 저장 연산: 키-값, 연산 사용법은 동일합니다.
차이점:
생활사:
1. sessionStorage: 라이프사이클은 현재 창이나 탭을 의미하며, 창이나 탭이 닫히면 sessionStorage에 저장된 모든 데이터가 비워집니다. 보안을 위해 sessionStroage를 사용하는 것이 권장됩니다.
( 1) 동종 정책 제한. 동일한 세션스토리지에서 서로 다른 페이지 간에 동작하려면 동일한 프로토콜, 동일한 호스트명, 동일한 포트 아래에 있어야 합니다. (IE 8과 9는 동일한 호스트명만을 기반으로 데이터를 저장하며, 프로토콜(HTTP 및 HTTPS) 및 포트 번호 요구사항은 무시합니다)
2) 단일 탭 제한,단일 페이지 탭에서는 다양한 URL 주소에 접근할 수 있습니다! 여기 단일 탭 제한이 있습니다。 sessionStorage 작업은 단일 탭으로 제한되며, sessionStorage 데이터는 이 탭에서 같은 페이지에 접근하여 공유할 수 있습니다.
3) 매장 내에서만 판매합니다. seesionStorage의 데이터는 HTTP 요청과 함께 서버로 전송되지 않고, 로컬에서만 적용되며 탭을 닫은 후 데이터를 지웁니다. (크롬의 복구 탭 기능을 사용하면 seesionStorage의 데이터도 복원됩니다.)
4) 저장 방식. seesionStorage 메서드와 키 메서드와 값 메서드를 사용합니다. 값은 문자열 타입이어야 하며(비문자열로 들어오면 저장 시 문자열로 변환됩니다.) 진짜 값은 "참"으로 변환됩니다.
5) 저장 공간 한도: 브라우저마다 저장 용량 제한이 다르지만, 대부분의 브라우저는 상한선을 5MB 미만으로 제한합니다.
접근성http://dev-test.nemikor.com/web-storage/support-test/브라우저의 저장 용량 한도를 테스트해 보세요.
)
2. localStorage: 생명 주기는 영구적이며, 사용자가 브라우저가 제공하는 UI에서 localStorage 정보를 명시적으로 삭제하지 않는 한, 해당 정보는 영구적으로 존재합니다.
정보 공유:
서로 다른 브라우저는 localStorage 또는 sessionStorage에서 정보를 공유할 수 없습니다. 같은 브라우저 내 페이지들은 동일한 localStorage를 공유할 수 있지만(페이지는 동일한 도메인 이름과 포트에 속함), 세션스토리지 정보는 서로 다른 페이지나 탭 간에 공유할 수 없습니다. 페이지와 탭은 최상위 창일 뿐이며, 만약 탭에 여러 개의 iframe 태그가 포함되어 있고 이들이 같은 페이지에 속한다면, 이들 탭 간에 sessionStorage를 공유할 수 있다는 점을 유념해야 합니다.
local.storage.ts 소스 코드:
session.storage.ts 소스 코드
파일 app.module.ts에서 언급됨
부품 사용
|