angular2는 전체 웹 사이트를 통해 데이터를 전달합니다.

Question

'구매할 옷을 가진 카트'와 같은 사용자 데이터가 있습니다. 사용자가 장바구니를 채우는 상점 화면이 있습니다. 요구 사항은 사용자가 체크 아웃 화면으로 이동하는 동안 화면에 계속 표시되어 카트를 채우는 것입니다. 한편 그는 내 계정, 설정, 새 주소 추가, 새 신용 카드 스크린 추가 및 주문 화면 지불 또는 쇼핑 카트로 돌아갈 때 이전에 처음 방문한 데이터로 해당 화면을 채울 수 있습니다. 상점 화면. 나는 데이터를 보존하지 않는 페이지를 리프레시 할 때 내 메인 어플리케이션 모듈 (다른 모듈을 모두로드)의 일부 common.service.ts에 퍼팅하는 것을 고려했다 ... 내가 생각해내는 유일한 아이디어는 쿠키를 사용하는 것이다 로그 아웃 할 때 탭을 지우거나 탭이 닫히면 자동 해결됩니다. 그러나이 솔루션은 현재 나에게 맞는 느낌이 들지 않으므로 더 나은 접근 방법을 모색합니다.

Answer 1

모든 구성 요소와 "페이지"에서 데이터에 액세스 할 수있게하려면 반드시 서비스를 사용해야합니다. 브라우저 새로 고침을 통한 데이터 지속성을 위해 쿠키 또는 로컬 저장소를 사용할 수 있습니다. JSON으로 데이터를 표현한 다음 JSON.stringify 및 JSON.parse을 사용하여 데이터를 각각 저장하고 검색 할 수 있으므로이 유형의 데이터에 대한 선호는 로컬 스토리지입니다.

일반적으로 사용할 수있는 메모리 데이터를 사용하는 것이 일반적인 전략입니다. 데이터가 수정 될 때마다 새 버전을 로컬 저장소에 저장하십시오. 서비스가 처음 시작될 때 로컬 스토리지에서 이전 데이터를로드해야합니다.

또 다른 잠재적 인 옵션은 로컬 스토리지에 대해 위에 정의 된 것과 유사한 전략에 따라이 정보를 데이터베이스에 저장하는 것입니다. 데이터베이스를 사용하면 로컬 저장소를 사용하여 수행 할 수없는 브라우저에서 데이터를 유지할 수 있다는 이점이 있습니다.

Answer 2

각도 2로 저장하는 것을 보면 인기있는 도구가 희박하고 (https://www.npmjs.com/package/ng2-redux) 세션에서 상태를 저장하고 상태에 액세스하여이 질문 (Where to write to localStorage in a Redux app?)의 답변과 결합하여 변경 사항을 구독 할 수 있습니다 edux 저장소에 저장하고 로컬 저장소에 저장합니다. 꽤 견고한 패턴이며 많은 것들을 허용합니다 (예를 들어 장바구니의 경우 상태를 재생할 수 있으므로 사용자가 장바구니에서 무언가를 제거한 다음 정말 쉽게 되돌릴 수 있기를 원합니다).