[javascript] 브라우저 창 / 탭을 닫을 때 localStorage 항목을 삭제하는 방법은 무엇입니까?

내 경우 : 브라우저가 닫히고 단일 탭이 아닌 브라우저를 닫을 때 삭제 해야하는 키 + 값을 가진 localStorage.

적절하고 개선 할 수있는 경우 내 코드를 참조하십시오.

//create localStorage key + value if not exist
if(localStorage){
   localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"};
}

//when browser closed - psedocode
$(window).unload(function(){
  localStorage.myPageDataArr=undefined;
});

답변

delete 연산자가 아닌 그렇게해야합니다.

localStorage.removeItem(key);

답변

window글로벌 키워드 와 함께 사용 :-

 window.localStorage.removeItem('keyName');

답변

당신은 사용할 수 있습니다 beforeunloadJavaScript 이벤트를 .

바닐라 JavaScript를 사용하면 다음과 같은 작업을 수행 할 수 있습니다.

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

브라우저 창 / 탭을 닫기 전에 키가 삭제되고 창 / 탭 닫기 작업을 확인하라는 메시지가 표시됩니다. 문제가 해결되기를 바랍니다.

참고 :이 onbeforeunload메서드는 문자열을 반환해야합니다.

답변

브라우저를 닫을 때 키를 삭제하려면 sessionStorage를 대신 사용해야합니다.

답변

사용해보십시오

$(window).unload(function(){
  localStorage.clear();
});

희망이 당신을 위해 작동

답변

localStorage 대신 sessionStorage를 사용하라는 제안이 실제로 도움이되지 않는 매우 구체적인 유스 케이스가 있습니다. 유스 케이스는 하나 이상의 탭을 연 상태에서 저장 한 것만 큼 간단하지만 마지막 탭을 닫으면 무효화됩니다. 크로스 탭과 창에 값을 저장해야하는 경우 시도한 것처럼 청취자와 인생을 복잡하게하지 않으면 sessionStorage가 도움이되지 않습니다. 그 동안 localStorage는 이것에 완벽하지만 브라우저를 다시 시작한 후에도 데이터가 대기하기 때문에 작업이 너무 좋지 않습니다. 결국 두 가지를 모두 사용하는 사용자 지정 코드와 논리를 사용했습니다.

오히려 설명하고 코드를 제공하고 싶습니다. 먼저 필요한 내용을 localStorage에 저장 한 다음 localStorage에 열려있는 탭 수를 포함하는 카운터를 만듭니다. 페이지가로드 될 때마다 증가하고 페이지가로드 될 때마다 감소합니다. 사용할 이벤트를 여기에서 선택할 수 있습니다. ‘로드’및 ‘언로드’를 제안합니다. 언로드 할 때 카운터가 0에 도달 할 때 정리 작업을 수행해야합니다. 이는 마지막 탭을 닫고 있음을 의미합니다. 여기 까다로운 부분이 있습니다. 페이지 내부의 페이지 다시로드 또는 탐색과 탭 닫기 사이의 차이점을 알 수있는 신뢰할 수 있고 일반적인 방법을 찾지 못했습니다. 따라서 저장 한 데이터가 첫 번째 탭인지 확인한 후로드시 다시 작성할 수있는 데이터가 아닌 경우, 새로 고칠 때마다 제거 할 수 없습니다. 대신 탭 카운터를 늘리기 전에 모든로드시 sessionStorage에 플래그를 저장해야합니다. 이 값을 저장하기 전에 이미 값이 있는지 확인하고 그렇지 않은 경우 처음으로이 세션에로드 중임을 의미하므로로드시 정리를 수행 할 수 있습니다. 값이 설정되지 않고 카운터는 0입니다.

답변

sessionStorage를 사용하십시오

sessionStorage 객체는 localStorage 객체와 동일하지만 한 세션의 데이터 만 저장한다는 점이 다릅니다. 사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다.

다음 예제는 현재 세션에서 사용자가 버튼을 클릭 한 횟수를 계산합니다.

예

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";