Question

我正在开发一个react-redux应用程序，一旦用户登录，我就会在本地存储中存储有关用户的一些信息。这样我就可以在执行操作时轻松检索用户信息。

如果用户关闭浏览器窗口，我想清除react应用程序的所有localstorage。我怎样才能做到这一点？

Answer 1

你可以使用JS函数：

            <script> 
                function deleteIfMatches(array, match){
                    array.some((ele)=>{ ele.indexOf(match) >= 0 ? array.splice(array.indexOf(ele),1): null });
                    return array;
                }
                var barIdFr = '<?php echo $barcode_id; ?>';
                var qtyToRetFr = <?php echo $quantity; ?>;
                var prodStrFr = '<?php echo $prod; ?>';
                var discountFr = '<?php echo $disc; ?>';
                var priceFr = '<?php echo $price; ?>';
                var cNumFr = '<?php echo $c_num; ?>';
                var dateFr = '<?php echo $sale_date; ?>';
                var prevRetAmtFr = $(".cust-info .atbr input").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '');
                $(".cust-info .atbr input").val(parseInt(priceFr)+parseInt(prevRetAmtFr)+" /-");
                $("#total").val(parseInt(priceFr)+parseInt(prevRetAmtFr)+" /-");
                $("#paid").val(parseInt(priceFr)+parseInt(prevRetAmtFr)+" /-");
                $(".checkout-product-list").find("#"+barIdFr).find(".sold-qty").text("0");
                var prodArrFr = prodStrFr.split("-");
                var singleProdFr = prodArrFr.filter(function(item, index) {
                            return item.indexOf(barIdFr) == 0; 
                        });
                console.log(priceFr+"  "+prevRetAmtFr);
                var singleProdQtyFr = singleProdFr[0].split("/");
                var prevQtyFr = singleProdQtyFr[4];
                var currQtyFr = 1;
                var currPlusPrevFr = parseInt(currQtyFr) + parseInt(prevQtyFr);
                deleteIfMatches(prodArrFr, barIdFr);
                prodArrFr.push(barIdFr+"/"+0+"/"+discountFr+"/"+priceFr+"/"+currPlusPrevFr+"/"+0);
                $.post("ajax-req-handler.php",
                {
                    key: "updating-db-for-Sales-return-single-product",
                    arrFr: prodArrFr,
                    custIdFr: cNumFr,
                    dateFr: dateFr
                },
                function( dataFr ){
                //  alert(dataFr);
                });
            </script>

在窗口关闭时发射事件

localStorage.clear();

Answer 2

您可以使用localStorage.clear，但您必须注意窗口关闭事件。另一种可能的解决方案是您可以使用会话存储，以便在浏览器打开之前可用。该会话将被删除后，您不需要做任何事情。

Answer 3

您可以考虑使用Window.sessionStorage代替Window.localStorage。

页面会话结束时，会在sessionStorage中存储的数据被清除。一页

只要浏览器处于打开状态并且幸存下来，
会话就会持续页面重新加载。 Source

Answer 4

要在浏览器关闭时清除localStorage数据，可以使用window.onunload事件检查选项卡关闭。

window.onunload = () => {
   // Clear the local storage
   window.MyStorage.clear()
}

Answer 5

您可以使用 NPM 包 react-beforeunload

在 NextJS (Typescript) 上实现 react-beforeunload

在您的主文件（在 NextJS 世界中：_app.tsx）上执行以下操作：

...
import { Beforeunload } from 'react-beforeunload';

const removeApplicationData = () => {
    if (window) { // NextJS is ServerSideRendering, therefore the window-check.
        localStorage.clear();
    }
};

...

return (
    <Beforeunload onBeforeunload={removeApplicationData}>
        <Component {...pageProps} />
    </Beforeunload>
    );

当用户关闭应用程序窗口时，如何清除localstorage？

5 个答案:

在 NextJS (Typescript) 上实现 react-beforeunload