복붙노트

[JQUERY] 브라우저 창 / 탭을 닫을 때 어떻게 로컬 스토리지 항목을 삭제하려면?

JQUERY

브라우저 창 / 탭을 닫을 때 어떻게 로컬 스토리지 항목을 삭제하려면?

해결법

  1. 1.delete 연산자로 그렇게 수행하지해야합니다 :

    delete 연산자로 그렇게 수행하지해야합니다 :

    localStorage.removeItem(key);

  2. 2.윈도우 글로벌 키워드를 사용합니다 -

    윈도우 글로벌 키워드를 사용합니다 -

     window.localStorage.removeItem('keyName');

  3. 3.당신은 자바 스크립트의 beforeunload 이벤트를 사용할 수있다.

    당신은 자바 스크립트의 beforeunload 이벤트를 사용할 수있다.

    자바 스크립트 바닐라 사용하여 당신이 뭔가를 같이 할 수있는 :

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

    즉, 창 닫기 / 탭 동작을 확인하기 위해 브라우저 창 / 닫힌 탭 및 프롬프트를하기 전에 키를 삭제합니다. 나는 그 문제가 해결되기를 바랍니다.

    참고 :입니다 onbeforeunload 방법은 문자열을 반환해야합니다.

  4. 4.당신이 키가 때 브라우저 닫기를 삭제하려면 대신하는 경우는 sessionStorage를 사용해야합니다.

    당신이 키가 때 브라우저 닫기를 삭제하려면 대신하는 경우는 sessionStorage를 사용해야합니다.

  5. 5.사용해보십시오

    사용해보십시오

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

    당신을 위해이 작품을 희망

  6. 6.어떤 제안 대신 로컬 스토리지의 sessionStorage를 사용할 수있는 매우 구체적인 사용 사례가 도움이 정말이하지 않는 것입니다. 유스 케이스는 적어도 하나 개의 탭이 열려있는 동안 저장 무언가를 필요로 간단하게 뭔가하지만 남아있는 마지막 탭을 닫으면를 무효화한다. 당신이 크로스 탭과 창을 저장하기 위해 값이 필요하면 내가 시도처럼 당신이, 청취자와 함께 당신의 인생을 복잡하게하지 않는 한, sessionStorage는 도움이되지 않습니다. 한편 로컬 스토리지이 완벽한 겠지만, 데이터도 브라우저를 다시 시작 후이 기다리고있을 것입니다 이후는 작업 '너무 잘'를한다. 난 둘 다 활용 사용자 정의 코드와 로직을 사용하여 끝났다.

    어떤 제안 대신 로컬 스토리지의 sessionStorage를 사용할 수있는 매우 구체적인 사용 사례가 도움이 정말이하지 않는 것입니다. 유스 케이스는 적어도 하나 개의 탭이 열려있는 동안 저장 무언가를 필요로 간단하게 뭔가하지만 남아있는 마지막 탭을 닫으면를 무효화한다. 당신이 크로스 탭과 창을 저장하기 위해 값이 필요하면 내가 시도처럼 당신이, 청취자와 함께 당신의 인생을 복잡하게하지 않는 한, sessionStorage는 도움이되지 않습니다. 한편 로컬 스토리지이 완벽한 겠지만, 데이터도 브라우저를 다시 시작 후이 기다리고있을 것입니다 이후는 작업 '너무 잘'를한다. 난 둘 다 활용 사용자 정의 코드와 로직을 사용하여 끝났다.

    차라리 다음 설명 코드를 줘야 할 것. 당신은 다음 또한 로컬 스토리지에 열었던 것을 탭의 수를 포함하는 카운터를 만들고, 로컬 스토리지에에 필요한 첫 번째 가게. 이 때마다 페이지가로드를 증가 때마다 페이지가 언로드 감소 될 것입니다. 당신은 내가 '로드'와 '언로드'을 건의 할 것, 사용 여기에 이벤트를 선택할 수 있습니다. 언로드 시간에, 당신은 당신이 카운터가 마지막 탭을 닫기있어 의미, 0에 도달 할 때하고자하는 정리 작업을 수행 할 필요가있다. 여기에 까다로운 부분은 온다 : 한 페이지를 다시로드하거나 탐색 페이지 내부와 탭의 폐쇄 사이의 차이를 구별 할 수있는 안정적이고 일반적인 방법을 발견하지 않았습니다. 당신이 저장하는 데이터는 당신이 당신의 첫 번째 탭 것을 확인한 후 부하에 다시 할 수있는 것이 아닙니다 그래서 경우에, 당신은 모든 새로 고침에서 제거 할 수 없습니다. 대신 당신은 탭 카운터를 증가시키기 전에 모든 부하에서 sessionStorage에 플래그를 저장해야합니다. 이 값을 저장하기 전에, 당신이하지 않는 경우 검사가 이미 값을 가지고 있는지 확인하고 만들 수 있습니다, 이 값을 설정하고, 카운터가 0이되지 않는 경우 부하에서 정리를 할 수 있다는 것을 의미 처음으로이 세션에이 방법은있는 거로드.

  7. 7.사용 sessionStorage

    사용 sessionStorage

    단지 하나 개의 세션에 대한 데이터를 저장하는 것을 제외 sessionStorage 객체는 로컬 스토리지 오브젝트 같다. 사용자가 브라우저 창을 닫을 때 데이터가 삭제됩니다.

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

    예

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

  8. 8.

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

  9. 9.

    localStorage.removeItem(key);  //item

localStorage.clear(); //all items

  10. 10.선택할 수있는 다섯 개 가지 방법이 있습니다 :

    선택할 수있는 다섯 개 가지 방법이 있습니다 :

    투명 도료를 해당 도메인에 대한 모든 레코드의 전체 스토리지를 호출 할 때,) (이 방법을 명확 사용할 수 있습니다. 이 매개 변수를받지 않습니다.

    window.localStorage.clear();

  11. 11.왜 sessionStorage를 사용하지?

    왜 sessionStorage를 사용하지?

    "단지 하나 개의 세션에 대한 데이터를 저장하는 것을 제외 sessionStorage 객체는 로컬 스토리지 객체와 동일하다. 사용자가 브라우저 윈도우를 닫을 때 데이터가 삭제된다."

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

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

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

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

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

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

  13. 13.다음은 로컬 스토리지로 작업 할 때 브라우저 지원이 있는지 확인하는 간단한 테스트는 다음과 같습니다

    다음은 로컬 스토리지로 작업 할 때 브라우저 지원이 있는지 확인하는 간단한 테스트는 다음과 같습니다

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

    (내가 구글 크롬을 사용) 예상대로 그것은 나를 위해 일했습니다. http://www.w3schools.com/html/html5_webstorage.asp :에서 적응.

  14. 14.나는 window.onbeforeunload 이벤트가 브라우저 / 탭 (요구되는)를 닫을 때뿐만 아니라 다른 여러 이벤트에뿐만 아니라 호출되기 때문에 여기에 제시된 솔루션은 100 % 정확하다고 생각하지 않습니다. (필요하지 않을 WHICH 수 있음)

    나는 window.onbeforeunload 이벤트가 브라우저 / 탭 (요구되는)를 닫을 때뿐만 아니라 다른 여러 이벤트에뿐만 아니라 호출되기 때문에 여기에 제시된 솔루션은 100 % 정확하다고 생각하지 않습니다. (필요하지 않을 WHICH 수 있음)

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

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

  15. 15.이 질문했다 육년 후이 질문을보고 한 후, 난 아직이 질문에 충분한 답이 없다는 것을 발견; 다음을 모두 달성해야하는 :

    이 질문했다 육년 후이 질문을보고 한 후, 난 아직이 질문에 충분한 답이 없다는 것을 발견; 다음을 모두 달성해야하는 :

    상기를 달성하기 위해 각 페이지로드의 시작이 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');

    편집 : 여기에 기본적인 아이디어는 다음과 같다 :

  16. 16.당신은 단순히 sessionStorage를 사용할 수 있습니다. sessionStorage 모든 키 값을 취소 할 수 있기 때문에 브라우저 창이 닫힐 때.

    당신은 단순히 sessionStorage를 사용할 수 있습니다. sessionStorage 모든 키 값을 취소 할 수 있기 때문에 브라우저 창이 닫힐 때.

    이 참조 : SessionStorage- MDN을

  17. 17.이것은 오래된 질문이지만, 위의 대답 중 어느 것도 완벽하지 보인다.

    이것은 오래된 질문이지만, 위의 대답 중 어느 것도 완벽하지 보인다.

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

    기본적으로, 아이디어는 :

    이 계획은 쉽게 손상 될 수있는 window.onbeforeunload 이벤트에 의존하지 않는 것을 통지 (브라우저가 종료 될 수 있기 때문에 /이 이벤트가 해고되지 않고 충돌)하십시오. 또한, 민감한 정보가 로컬 스토리지에 저장되는 시간은 않을 그래서 (당신이 크로스 탭 메시지 이벤트에 대한 transcients 변화 감지에 의존하기 때문에) 매우 작고 사용자의 하드 드라이브에있는 민감한 정보 유출이.

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

  18. 18.가까운 그래서 아마도 브라우저를 감지하는 등의 방법이 더 없습니다 당신의 브라우저 닫을 수 없습니다 삭제 로컬 스토리지 할 수 있지만 내 프로젝트에서 구현되는 브라우저 close.This 후 사용의 sessionCookies 그것을 파괴 할 수있는 일들을 처리 할 수있는 또 다른 방법이 있습니다.

    가까운 그래서 아마도 브라우저를 감지하는 등의 방법이 더 없습니다 당신의 브라우저 닫을 수 없습니다 삭제 로컬 스토리지 할 수 있지만 내 프로젝트에서 구현되는 브라우저 close.This 후 사용의 sessionCookies 그것을 파괴 할 수있는 일들을 처리 할 수있는 또 다른 방법이 있습니다.

  19. 19.8.5 년과 원래의 질문은 사실은 대답하지 않았다.

    8.5 년과 원래의 질문은 사실은 대답하지 않았다.

    이 기본 코드는 당신에게 두 세계의 최고를 제공 할 것입니다. 저장이이 지속 유일한만큼 (sessionStorage 같은) 브라우저 세션뿐만 아니라 탭 (로컬 스토리지) 사이의 공유입니다.

    그것은 순전히 로컬 스토리지를 통해이 작업을 수행합니다.

    function cleanup(){
    // whatever cleanup logic you want
    window.localStorage.clear();
    window.sessionStorage.clear();
}

window.onbeforeunload = function () {
    let tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        cleanup();
    } else {
        window.localStorage.setItem('tabs', --tabs);
        window.dispatchEvent(new Event('storage'));
    }
}

window.onstorage = function () {
    console.log(JSON.parse(window.localStorage.getItem('tabs')));
};

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

  20. 20.당신은 삭제 로컬 스토리지에 다음 코드를 시도 할 수 있습니다 :

    당신은 삭제 로컬 스토리지에 다음 코드를 시도 할 수 있습니다 :

    delete localStorage.myPageDataArr;

    21. from https://stackoverflow.com/questions/9943220/how-to-delete-a-localstorage-item-when-the-browser-window-tab-is-closed by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] HTML 이미지 맵으로 사용 JQuery와 호버  (0) 2020.10.25
[JQUERY] 나는 웹 페이지에서 Excel로 테이블을 내보낼 수있는 방법 [마감]  (0) 2020.10.25
[JQUERY] 어떻게 jQuery를 함께 <선택>의 옵션을 변경하려면?  (0) 2020.10.25
[JQUERY] ASP.NET MVC에 대한 그리드 컨트롤? [닫은]  (0) 2020.10.25
[JQUERY] .replace () 메소드는 장소에 문자열을 변경하지  (0) 2020.10.25
,

티스토리툴바