Làm cách nào để xóa một mục localStorage khi cửa sổ / tab trình duyệt bị đóng?

Trường hợp của tôi: localStorage với khóa + giá trị sẽ bị xóa khi đóng trình duyệt và không phải là một tab.

Vui lòng xem mã của tôi nếu nó phù hợp và những gì có thể được cải thiện:

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

nên được thực hiện như thế và không phải với toán tử xóa:

localStorage.removeItem(key);

Sử dụng với windowtừ khóa toàn cầu: -

 window.localStorage.removeItem('keyName');

Bạn có thể sử dụng beforeunloadsự kiện này trong JavaScript.

Sử dụng vanilla JavaScript, bạn có thể làm một cái gì đó như:

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

Điều đó sẽ xóa khóa trước khi đóng cửa sổ / tab trình duyệt và nhắc bạn xác nhận hành động đóng cửa sổ / tab. Tôi hy vọng rằng giải quyết vấn đề của bạn.

LƯU Ý: onbeforeunloadPhương thức sẽ trả về một chuỗi.

Bạn nên sử dụng sessionStorage thay thế nếu bạn muốn xóa khóa khi trình duyệt đóng.

Hãy thử sử dụng

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

Hy vọng điều này làm việc cho bạn

Có một trường hợp sử dụng rất cụ thể trong đó mọi đề xuất sử dụng sessionStorage thay vì localStorage không thực sự hữu ích. Ca sử dụng sẽ đơn giản như có một cái gì đó được lưu trữ trong khi bạn có ít nhất một tab được mở, nhưng vô hiệu hóa nó nếu bạn đóng tab cuối cùng còn lại. Nếu bạn cần các giá trị của mình được lưu chéo và cửa sổ, sessionStorage không giúp bạn trừ khi bạn làm phức tạp cuộc sống của mình với người nghe, như tôi đã thử. Trong khi đó, localStorage sẽ hoàn hảo cho việc này, nhưng nó thực hiện công việc 'quá tốt', vì dữ liệu của bạn sẽ chờ ở đó ngay cả sau khi khởi động lại trình duyệt. Tôi đã kết thúc bằng cách sử dụng một mã tùy chỉnh và logic tận dụng lợi thế của cả hai.

Tôi muốn giải thích sau đó đưa ra mã. Đầu tiên lưu trữ những gì bạn cần trong localStorage, sau đó trong localStorage tạo một bộ đếm sẽ chứa số lượng tab mà bạn đã mở. Điều này sẽ được tăng lên mỗi khi trang tải và giảm mỗi lần tải trang. Bạn có thể chọn ở đây các sự kiện để sử dụng, tôi đề nghị 'tải' và 'dỡ tải'. Tại thời điểm bạn dỡ tải, bạn cần thực hiện các tác vụ dọn dẹp mà bạn muốn khi bộ đếm về 0, nghĩa là bạn đang đóng tab cuối cùng. Ở đây có phần khó khăn: Tôi chưa tìm thấy một cách đáng tin cậy và chung chung để nói sự khác biệt giữa tải lại trang hoặc điều hướng bên trong trang và việc đóng tab. Vì vậy, nếu dữ liệu bạn lưu trữ không phải là thứ bạn có thể xây dựng lại khi tải sau khi kiểm tra xem đây có phải là tab đầu tiên của bạn không, sau đó bạn không thể loại bỏ nó mỗi khi làm mới. Thay vào đó, bạn cần lưu trữ một cờ trong sessionStorage ở mỗi lần tải trước khi tăng bộ đếm tab. Trước khi lưu trữ giá trị này, bạn có thể thực hiện kiểm tra xem nó đã có giá trị chưa và nếu không, điều này có nghĩa là bạn đang tải vào phiên này lần đầu tiên, nghĩa là bạn có thể thực hiện dọn dẹp khi tải nếu điều này giá trị không được đặt và bộ đếm là 0.

sử dụng sessionStorage

Đối tượng sessionStorage bằng với đối tượng localStorage, ngoại trừ việc nó lưu trữ dữ liệu chỉ trong một phiên. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.

Ví dụ sau đây đếm số lần người dùng đã nhấp vào nút, trong phiên hiện tại:

Thí dụ

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

Mặc dù, một số người dùng đã trả lời câu hỏi này rồi, tôi sẽ đưa ra một ví dụ về cài đặt ứng dụng để giải quyết vấn đề này.

Tôi gặp vấn đề tương tự. Tôi đang sử dụng mô-đun https://github.com/grevory/angular-local-st Storage trong ứng dụng angularjs của mình. Nếu bạn định cấu hình ứng dụng của mình như sau, nó sẽ lưu biến trong lưu trữ phiên thay vì lưu trữ cục bộ. Do đó, nếu bạn đóng trình duyệt hoặc đóng tab, bộ nhớ phiên sẽ tự động bị xóa. Bạn không cần phải làm bất cứ điều gì.

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

Hy vọng nó sẽ giúp.

Có năm phương pháp để lựa chọn:

• setItem (): Thêm khóa và giá trị vào localStorage
• getItem (): Lấy một giá trị bằng khóa từ localStorage
• removeItem (): Xóa một mục bằng khóa khỏi localStorage
• clear (): Xóa tất cả localStorage
• key (): Đã truyền một số để lấy khóa thứ n của localStorage

Bạn có thể sử dụng Clear (), phương thức này khi được gọi sẽ xóa toàn bộ lưu trữ của tất cả các bản ghi cho miền đó. Nó không nhận được bất kỳ tham số.

window.localStorage.clear();

Đây là một thử nghiệm đơn giản để xem bạn có hỗ trợ trình duyệt khi làm việc với bộ nhớ cục bộ hay không:

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

Nó hoạt động với tôi như mong đợi (tôi sử dụng Google Chrome). Chuyển thể từ: http://www.w3schools.com/html/html5_webst Storage.asp .

Tôi không nghĩ rằng giải pháp được trình bày ở đây là chính xác 100% vì sự kiện window.onb Beforeunload được gọi không chỉ khi đóng trình duyệt / Tab (MÀ CẦN BẮT BUỘC), mà còn trên tất cả các sự kiện khác. (MIGHT KHÔNG ĐƯỢC YÊU CẦU)

Xem liên kết này để biết thêm thông tin về danh sách các sự kiện có thể kích hoạt window.onb Beforeunload: -

http://msdn.microsoft.com/en-us/l Library / ms536907 (VS85) .aspx

Tại sao không sử dụng sessionStorage?

"Đối tượng sessionStorage bằng với đối tượng localStorage, ngoại trừ việc nó chỉ lưu trữ dữ liệu trong một phiên. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt."

http: //www.w3schools.com/html/html5_webst Storage.asp

Sau khi xem câu hỏi này 6 năm sau khi được hỏi, tôi thấy rằng vẫn chưa có câu trả lời đầy đủ cho câu hỏi này; cần đạt được tất cả những điều sau đây:

• Xóa bộ nhớ cục bộ sau khi đóng trình duyệt (hoặc tất cả các tab của tên miền)
• Giữ gìn bộ nhớ cục bộ trên các tab, nếu ít nhất một tab vẫn hoạt động
• Bảo toàn bộ nhớ cục bộ khi tải lại một tab

Thực hiện đoạn javascript này khi bắt đầu mỗi lần tải trang để đạt được những điều trên:

((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');

Chỉnh sửa: Ý tưởng cơ bản ở đây là như sau:

1. Khi bắt đầu từ đầu, bộ lưu trữ phiên được gán một id ngẫu nhiên trong khóa được gọi là tabid
2. Bộ lưu trữ cục bộ sau đó được thiết lập với một khóa gọi là tabschứa một đối tượng các khóa đótabid được đặt thành 1.
3. Khi tab được tải, bộ nhớ cục bộ tabsđược cập nhật thành một đối tượng có chứatabid thành 0.
4. Nếu tab được tải lại, lần đầu tiên nó được tải và tiếp tục lại. Vì khóa lưu trữ phiên tabidtồn tại và tabskhóa lưu trữ cục bộ cũng có khóa phụ làtabid bộ nhớ cục bộ sẽ không bị xóa.
5. Khi trình duyệt được tải, tất cả bộ nhớ phiên sẽ bị xóa. Khi tiếp tục lưu trữ phiên tabidsẽ không còn tồn tại nữa và một cái mới tabidsẽ được tạo. Vì bộ nhớ cục bộ không có khóa phụ cho cái này tabid, cũng không có cái nào khác tabid(tất cả các phiên đã bị đóng), nên nó đã bị xóa.
6. Khi một tab được tạo mới, một cái mới tabidđược tạo trong bộ lưu trữ phiên, nhưng vì có ít nhất một tabs[ tabid] tồn tại, bộ nhớ cục bộ không bị xóa

Đây là một câu hỏi cũ, nhưng dường như không có câu trả lời nào ở trên là hoàn hảo.

Trong trường hợp bạn muốn lưu trữ xác thực hoặc bất kỳ thông tin nhạy cảm nào bị phá hủy chỉ khi đóng trình duyệt, bạn có thể dựa vào sessionStoragevà localStoragecho thông báo qua thẻ chéo.

Về cơ bản, ý tưởng là:

1. Bạn bootstrap từ không có tab nào trước đó được mở, do đó cả của bạn localStoragevà sessionStorageđều trống (nếu không, bạn có thể xóa localStorage). Bạn sẽ phải đăng ký một người nghe sự kiện tin nhắn trên localStorage.
2. Người dùng xác thực / tạo thông tin nhạy cảm trên tab này (hoặc bất kỳ tab nào khác được mở trên miền của bạn).
3. Bạn cập nhật sessionStorageđể lưu trữ thông tin nhạy cảm và sử dụng localStorageđể lưu trữ thông tin này, sau đó xóa thông tin đó (bạn không quan tâm đến thời gian ở đây, vì sự kiện đã được xếp hàng khi dữ liệu thay đổi). Bất kỳ tab nào khác được mở tại thời điểm đó sẽ được gọi lại vào sự kiện tin nhắn và sẽ cập nhật chúngsessionStorage với thông tin nhạy cảm.
4. Nếu người dùng mở một tab mới trên tên miền của bạn, nó sessionStoragesẽ trống. Mã sẽ phải đặt một khóa trong localStorage(ví dụ req:). Bất kỳ (tất cả) tab khác sẽ được gọi lại trong sự kiện tin nhắn, xem phím đó và có thể trả lời với thông tin nhạy cảm từ sessionStorage(như trong 3), nếu chúng có như vậy.

Xin lưu ý rằng lược đồ này không phụ thuộc vào window.onbeforeunloadsự kiện dễ vỡ (vì trình duyệt có thể bị đóng / sập mà không có các sự kiện này được kích hoạt). Ngoài ra, thời gian thông tin nhạy cảm được lưu trữ trênlocalStorage rất nhỏ (vì bạn dựa vào phát hiện thay đổi của người chuyển đổi cho sự kiện tin nhắn trên tab chéo) nên không chắc là rò rỉ thông tin nhạy cảm như vậy trên ổ cứng của người dùng.

Đây là bản demo của khái niệm này: http://jsfiddle.net/oypdwxz7/2/

Không có cách nào để phát hiện đóng trình duyệt, vì vậy có lẽ bạn không thể xóa localStorage khi đóng trình duyệt nhưng có một cách khác để xử lý những thứ bạn có thể sử dụng sessionCookies vì ​​nó sẽ phá hủy sau khi đóng trình duyệt. Đây là dự án của tôi.

Bạn chỉ có thể sử dụng sessionStorage. Bởi vì sessionStorage cho phép xóa tất cả giá trị khóa khi cửa sổ trình duyệt sẽ bị đóng.

Xem ở đó: SessionStorage- MDN

bạn có thể thử mã sau để xóa bộ nhớ cục bộ:

delete localStorage.myPageDataArr;