브라우저 창 / 탭을 닫을 때 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.";

for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.push(localStorage.key(i));
    }
}

for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

일부 사용자는 이미이 질문에 이미 답변했지만이 문제를 해결하기위한 응용 프로그램 설정의 예를 제공하고 있습니다.

나는 같은 문제가 있었다. 내 angularjs 응용 프로그램에서 https://github.com/grevory/angular-local-storage 모듈을 사용하고 있습니다 . 다음과 같이 앱을 구성하면 로컬 저장소 대신 세션 저장소에 변수가 저장됩니다. 따라서 브라우저를 닫거나 탭을 닫으면 세션 저장소가 자동으로 제거됩니다. 당신은 아무것도 할 필요가 없습니다.

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

그것이 도움이되기를 바랍니다.

선택할 수있는 5 가지 방법이 있습니다.

• setItem () : 키와 값을 localStorage에 추가
• getItem () : localStorage에서 키로 값을 검색
• removeItem () : localStorage에서 키로 항목 제거
• clear () : 모든 localStorage를 지 웁니다.
• key () : localStorage의 n 번째 키를 검색하기 위해 숫자를 전달했습니다.

clear ()를 사용할 수 있습니다.이 메소드를 호출하면 해당 도메인에 대한 모든 레코드의 전체 스토리지가 지워집니다. 매개 변수를받지 않습니다.

window.localStorage.clear();

로컬 저장소로 작업 할 때 브라우저를 지원하는지 확인하는 간단한 테스트는 다음과 같습니다.

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

예상대로 작동했습니다 (Chrome을 사용합니다). :에서 적응 http://www.w3schools.com/html/html5_webstorage.asp .

window.onbeforeunload 이벤트가 브라우저 / 탭이 닫힐 때 (WHICH IS REQUIRED)뿐만 아니라 다른 모든 이벤트에서도 호출되기 때문에 여기에 제시된 솔루션이 100 % 정확하다고 생각하지 않습니다. (필요하지 않은 경우)

window.onbeforeunload :-를 발생시킬 수있는 이벤트 목록에 대한 자세한 내용은이 링크를 참조하십시오.

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

왜 sessionStorage를 사용하지 않았습니까?

"sessionStorage 개체는 localStorage 개체와 같습니다. 단 하나의 세션에 대한 데이터 만 저장합니다. 사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다."

http://www.w3schools.com/html/html5_webstorage.asp

6 년 후에이 질문을보고 난 후에도 여전히이 질문에 대한 충분한 답이 없다는 것을 알았습니다. 다음을 모두 달성해야합니다.

• 브라우저 또는 도메인의 모든 탭을 닫은 후 로컬 저장소 지우기
• 하나 이상의 탭이 활성 상태 인 경우 여러 탭에서 로컬 스토리지 유지
• 단일 탭을 다시로드 할 때 로컬 스토리지 유지

위의 내용을 달성하기 위해 각 페이지로드가 시작될 때이 자바 스크립트를 실행하십시오.

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

편집 : 기본 아이디어는 다음과 같습니다.

1. 처음부터 시작할 때 세션 저장소에는라는 키에 임의의 ID가 할당됩니다. tabid
2. 그런 다음 tabs키 tabid를 1로 설정 한 객체를 포함하는 키로 로컬 스토리지 가 설정됩니다.
3. 탭을 언로드하면 로컬 저장소 tabs가 포함 된 객체로 업데이트됩니다tabid 가 0으로 설정된 .
4. 탭을 다시로드하면 먼저 언로드되고 다시 시작됩니다. 세션 스토리지의 키 tabid가 존재 tabs하고 하위 키 가있는 로컬 스토리지 키도 존재하므로tabid 지워지지 않습니다.
5. 브라우저가 언로드되면 모든 세션 저장소가 지워집니다. 세션 저장 tabid을 재개하면 더 이상 존재하지 않으며 새로운 tabid것이 생성됩니다. 로컬 저장소에는 이것에 대한 하위 키가 tabid없으며 다른 키 도 없습니다.tabid 세션 (모든 세션이 닫 혔음)이 지워집니다.
6. 새로 작성된 탭 tabid에서 세션 스토리지에 새 탭 이 생성되지만 하나 이상의 tabs[ tabid]가 존재하므로 로컬 스토리지가 지워지지 않습니다.

이것은 오래된 질문이지만 위의 답변 중 어느 것도 완벽한 것은 아닙니다.

경우에 당신은 저장 인증 또는 브라우저를 닫을 경우에만, 당신이 신뢰할 수있는 파괴되는 민감한 정보를 원하는 sessionStorage및 localStorage크로스 탭의 메시지 전달을 위해.

기본적으로 아이디어는 다음과 같습니다.

1. 이전 탭을 열지 않은 상태에서 부트 스트랩을 사용하므로 귀하 localStorage와 sessionStorage모두 비어 있습니다 (그렇지 않으면을 지울 수 있습니다 localStorage). 에 메시지 이벤트 리스너를 등록해야합니다 localStorage.
2. 사용자는이 탭 (또는 도메인에서 열린 다른 탭)에서 중요한 정보를 인증 / 생성합니다.
3. sessionStorage민감한 정보를 저장 하도록를 업데이트하고 를 사용 localStorage하여이 정보를 저장 한 다음 삭제합니다 (데이터가 변경 될 때 이벤트가 대기 했으므로 여기서 타이밍에 신경 쓰지 않습니다). 그 때 열린 다른 탭은 메시지 이벤트에서 다시 호출 sessionStorage되고 중요한 정보로 업데이트됩니다 .
4. 사용자가 도메인에서 새 탭을 열면 sessionStorage비어 있습니다. 코드는 localStorage(예 :)에 키를 설정해야합니다 req. 다른 모든 탭은 메시지 이벤트에서 다시 호출되며 해당 키를 확인하고 중요한 정보가 sessionStorage있다면 (3과 같이) 응답 할 수 있습니다 .

이 구성표 window.onbeforeunload는 취약한 이벤트에 의존하지 않습니다 (이러한 이벤트를 발생시키지 않고 브라우저를 닫거나 깰 수 있기 때문에). 또한 민감한 정보가 저장된 시간은localStorage 이 매우 짧습니다 (크로스 탭 메시지 이벤트에 대한 과도 변경 감지에 의존하기 때문에). 이러한 민감한 정보가 사용자의 하드 드라이브에서 누출되지는 않습니다.

이 개념의 데모는 다음과 같습니다. http://jsfiddle.net/oypdwxz7/2/

브라우저 닫기를 감지하는 방법은 없으므로 브라우저 닫기에서 localStorage를 삭제할 수는 없지만 브라우저 닫기 후 sessionCookies를 사용할 수있는 것을 처리하는 또 다른 방법이 있습니다.

sessionStorage를 간단하게 사용할 수 있습니다. sessionStorage를 사용하면 브라우저 창이 닫힐 때 모든 키 값을 지울 수 있습니다.

참조 : SessionStorage- MDN

다음 코드를 사용하여 로컬 저장소를 삭제할 수 있습니다.

delete localStorage.myPageDataArr;