브라우저 창/탭이 닫혔을 때 localStorage 항목을 삭제하는 방법

브라우저 창/탭이 닫혔을 때 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;
});

다음과 같이 해야 합니다.삭제 연산자를 사용하면 안 됩니다.

localStorage.removeItem(key);

와께 use와 window 키워드global "syslog:

 window.localStorage.removeItem('keyName');

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

도 이렇게 하실 수 있습니다.beforeunload이벤트를 표시합니다.

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

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

그러면 브라우저 창/탭이 닫히기 전에 키가 삭제되고 창/탭 닫기 작업을 확인하라는 메시지가 나타납니다.그것으로 당신의 문제가 해결되길 바랍니다.

★★★★★onbeforeunload메서드는 문자열을 반환해야 합니다.

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.";

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

사용해보십시오.

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

이것이 당신에게 도움이 되길 바랍니다.

5가지 방법 중에서 선택할 수 있습니다.

• setItem(): localStorage에 키와 값을 추가합니다.
• getItem(): localStorage에서 키로 값을 가져옵니다.
• removeItem(): localStorage에서 항목을 키별로 삭제합니다.
• clear(): 모든 localStorage를 클리어합니다.
• key(): localStorage의 n번째 키를 취득하기 위한 번호를 전달했습니다.

clear()를 사용할 수 있습니다.이 메서드를 호출하면 해당 도메인의 모든 레코드의 저장공간이 삭제됩니다.파라미터는 수신되지 않습니다.

window.localStorage.clear();

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]);
}

8.5년이 지났지만, 원래의 질문은 실제로 답하지 못했다.

브라우저가 닫히고 단일 탭이 아닌 경우.

이 기본적인 코드 조각은 두 가지 장점을 모두 제공합니다.브라우저 세션(sessionStorage 등) 동안만 유지되지만 탭 간(localStorage) 공유도 가능한 저장소입니다.

이는 순전히 local Storage를 통해 이루어집니다.

function cleanup(){
    // place whatever cleanup logic you want here, for example:
    // window.localStorage.removeItem('my-item')
}

function tabOpened(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === null) {
        window.localStorage.setItem('tabs', 1)
    } else {
        window.localStorage.setItem('tabs', ++tabs)
    }
}

function tabClosed(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        window.localStorage.removeItem('tabs')
        cleanup()
    } else {
        window.localStorage.setItem('tabs', --tabs)
    }
}

window.onload = function () {
    tabOpened();
}

window.onbeforeunload = function () {
    tabClosed();
}

sessionStorage를 사용하지 않는 이유

"sessionStorage 객체는 localStorage 객체와 동일하지만 데이터를 저장하는 세션은 1개뿐입니다.사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다."

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

이미 이 질문에 답한 사용자도 있습니다만, 이 문제를 해결하기 위해 어플리케이션 설정 예를 제시하겠습니다.

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

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

도움이 되길 바랍니다.

다음은 로컬 스토리지에서 작업할 때 브라우저를 지원하는지 확인하는 간단한 테스트입니다.

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..");
}

예상대로 작동했습니다(Google Chrome을 사용하고 있습니다.각색원: http://www.w3schools.com/html/html5_webstorage.asp

여기에 제시된 솔루션은 브라우저/탭이 닫혀 있을 때(WHI IS가 필수)뿐만 아니라 다른 모든 이벤트에서도 window.onbefore unload 이벤트가 호출되기 때문에 100% 정확하다고는 생각하지 않습니다.

window.onbeforeunload:- 를 기동할 수 있는 이벤트의 리스트에 대해서는, 다음의 링크를 참조해 주세요.

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

질문을 받은 지 6년이 지난 후에도 이 질문을 검토한 결과, 이 질문에 대한 답변이 아직 충분치 않다는 것을 알게 되었습니다.그것은 다음 사항을 모두 달성할 수 있을 것입니다.

• 브라우저(또는 도메인의 모든 탭)를 닫은 후 로컬 스토리지 클리어
• 탭 간에 로컬 스토리지 유지(하나 이상의 탭이 활성 상태인 경우)
• 단일 탭을 다시 로드할 때 로컬 스토리지 유지

위의 작업을 수행하려면 각 페이지 로드 시작 시 이 Javascript를 실행하십시오.

((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그 열쇠가 있는 오브젝트를 포함하는 모습tabid1로 설정되어 있습니다.
3. 탭이 언로드되면 로컬 스토리지의tabs다음을 포함하는 개체로 업데이트됨tabid0으로 설정합니다.
4. 탭이 새로고침되면 먼저 언로드되었다가 재개됩니다.세션 저장소의 키 이후tabid로컬 스토리지도 존재합니다.tabs서브키와 함께 키tabid로컬 스토리지가 지워지지 않습니다.
5. 브라우저가 언로드되면 모든 세션스토리지가 클리어 됩니다.세션 저장소를 재개할 때tabid더 이상 존재하지 않을 것이고 새로운 것은tabid생성됩니다.로컬 스토리지에는 이 서브 키가 없기 때문에tabid, 다른 것도 없습니다.tabid(모든 세션이 종료되었습니다) 이상 없습니다.
6. 새로 생성된 탭, 새로 생성된 탭tabid세션 스토리지에서 생성되지만, 적어도1개의 세션스토어에서tabs[tabid]가 존재하지만 로컬스토리지는 클리어되지 않습니다.

sessionStorage를 사용하면 됩니다.sessionStorage는 브라우저 창이 닫힐 때 모든 키 값을 지울 수 있기 때문입니다.

참조: Session Storage - MDN

이렇게 하면 물체에 효과가 있습니다.

localStorage.removeItem('key');

또는

localStorage.setItem('key', 0 );  

이것은 오래된 질문이지만, 위의 답변 중 어느 것도 완벽하지 않은 것 같습니다.

브라우저가 닫혀 있을 때만 파괴되는 인증 정보 또는 중요한 정보를 저장하는 경우,sessionStorage ★★★★★★★★★★★★★★★★★」localStorage크로스 탭 메시지 전달에 사용됩니다.

기본적으로는 다음과 같습니다.

1. 열리지 않은 이 모두 실행된다.localStorage ★★★★★★★★★★★★★★★★★」sessionStorage 있습니다(그렇지 않은 수 ).localStoragelocalStorage.
2. 사용자는 이 탭(또는 도메인에 열려 있는 다른 탭)에서 중요한 정보를 인증/작성합니다.
3. sessionStorage하고, 「」를 사용합니다.localStorage이 정보를 저장한 후 삭제합니다(데이터 변경 시 이벤트가 큐잉되었으므로 여기서 타이밍은 상관없습니다). 때 있는 에서 다시 되며, 탭이 업데이트 .sessionStorage중요한 정보를 가지고 있습니다.
4. 에서 새 경우 해당 은 " " " 입니다.sessionStorage이렇게 하다. 는 키를 설정해야 .localStorage (예:req키가 되며, 해당 탭은 메시지이벤트의 할 수 sessionStorage과 같이) (3번과 같이)

이 계획은 다음 항목에 의존하지 않습니다.window.onbeforeunload(이러한 이벤트는 실행되지 않고 브라우저를 닫거나 닫을 수 있기 때문에) 취약합니다., 기밀 되어 있는 .localStorage는 매우 작기 때문에(크로스 탭 메시지이벤트를 위해 트랜스시언트 변경 감지에 의존하기 때문에) 사용자의 하드 드라이브에서 이러한 기밀 정보가 유출될 가능성은 거의 없습니다.

이 컨셉의 데모를 소개합니다.http://jsfiddle.net/oypdwxz7/2/

브라우저 닫힘을 감지하는 방법은 없으므로 브라우저 닫힘에서 localStorage를 삭제할 수는 없지만 sessionCookies를 사용하면 브라우저 닫힘 후 파괴되므로 다른 방법으로 처리할 수 있습니다.이것은 제 프로젝트에서 구현한 것입니다.

    if(localStorage.getItem("visit") === null) {
      localStorage.setItem('visit', window.location.hostname);
      console.log(localStorage.getItem('visit'));
    } 
      else if(localStorage.getItem('visit') == 'localhost'){
            console.log(localStorage.getItem('visit'));
      }
    else {
     console.log(localStorage.getItem('visit'));
    }
   $(document).ready(function(){
      $("#clickme").click(function(){
         localStorage.setItem('visit', '0');
      });
   });  
   window.localStorage.removeItem('visit');

window.addEventListener('beforeunload', (event) => {

    localStorage.setItem("new_qus_id", $('.responseId').attr('id'));

    var new_qus_no = localStorage.getItem('new_qus_id');
    console.log(new_qus_no);

});

if (localStorage.getItem('new_qus_id') != '') {
    var question_id = localStorage.getItem('new_qus_id');
} else {
    var question_id = "<?php echo $question_id ; ?>";
}

다음 코드를 사용하여 로컬 스토리지를 삭제할 수 있습니다.

delete localStorage.myPageDataArr;

언급URL : https://stackoverflow.com/questions/9943220/how-to-delete-a-localstorage-item-when-the-browser-window-tab-is-closed