브라우저 로컬/세션 저장소에 루트 범위 데이터를 저장하고 페이지를 다시로드 한 후로드

Question

팀 단일 응용 프로그램을 구현했습니다. 여기서 응용 프로그램의 다른 페이지에 액세스하기 위해 일부 데이터를 루트 범위에 저장합니다. 정상적인 흐름에서는 모든 것이 잘 작동합니다. 브라우저 새로 고침으로 문제가 발생했습니다. 사용자가 응용 프로그램 페이지 중 하나에서 사용자가 페이지를 새로 고치면 루트 범위에서 전체 데이터가 손실됩니다. 우리는 새로 고침을 허락하지 않으려 고 노력했다. 그러나 사용자에게 알릴 수있는 사용자 지정 메시지를 추가 할 수는 없으며 사용자가이를 알 수없는 것으로 나타났습니다. 이제 사용자가 페이지를 새로 고침 할 때마다 사용자를 로그 아웃하는 중입니다. 이는 사용자에게 어색하며 너무 많은 보안을 필요로하지 않습니다. 따라서 우리는 페이지를 새로 고침 할 때 로컬 저장소에 전체 루트 범위 데이터를 추가하려고하고 페이지를 다시로드 한 후에 로컬/세션 저장소 데이터의 전체 데이터를 루트 범위로 다시로드합니다. 우리는 한 곳에서해야합니다. 따라서 우리는 개별 모듈 페이지에서이를 구현할 필요가 없습니다. 이를 수행 할 수있는 방법이 있습니까? 어느 누구도 다른 방법이 있으면 제안 할 수 있습니까?

Answer 1

HTML5 로컬 저장소는 브라우저에 따라 800kb-10mb 만 사용할 수 있습니다. Safari에는 99 개의 IDK가 있다고 들었습니다. 최신 Google 크롬 (2/14/17)에서 5MB.

어쨌든, JSON에 stringifying하여 로컬 저장소를 만들 수 있습니다

localStorage.setItem('myDataStorage', JSON.stringify(myData)); 

그런 다음 그들에게

var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage')); 

myDataStorage를 검색하면 생성 된 로컬 스토리지의 이름입니다. 여러 가지 이름을 사용하여 여러 개의 로컬 저장소를 만들 수 있습니다. 각 로컬 저장소의 크기가 제한된다는 점에 유의하십시오. HTML 로컬 저장소를 사용하여 HD 이미지를 훨씬 적은 비디오로 저장할 것을 기대하지 마십시오.

이렇게하면 myRetrievedData라는 변수를 사용하여 코드에서 검색 한 데이터를 조작 할 수 있습니다.