Question

我希望在用户第一次访问我的网页时显示模式。如果用户访问另一个页面，然后点击后退按钮，则该模式不应再次显示。

我的代码适用于隐身（Chrome）和私密浏览（Firefox），但在任一浏览器中都无法在正常浏览模式下使用。

我的HTML：

<div class="container">
    <h1>My First Bootstrap Page</h1>
    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyword="false">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div

我的Javascript：

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#myModal').modal('show'); 
    }
});

Answer 1

使用超时而不是仅检查本地存储是否存在。

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow') || 0;
    var timeout = 86400000; // 1 day in milliseconds
    var now = new Date().getTime();
    if (now - isshow > timeout) {
        $('#myModal').modal('show'); 
    }
    localStorage.setItem('isshow', now); // Save the last time we went to the page
});

这将显示自上次您访问该页面以来至少1天的模态。

本地存储不工作chrome和firefox但它在cognito窗口和私人窗口工作

1 个答案: