js响应手机物理返回键 通过sessionStorage和历史记录实现

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

    <head>
    <meta charset="UTF-8">
    <title>响应手机返回键</title>
    </head>
    <style>
.prj-cover-floor {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

.active {
    display: block;
}
</style>

<body style="height: 100%;">
    <div>
    <button id="prj-filtrate-open-icon">点我出现浮层</button>
    </div>
    <div id="prj-cover-floor" class="prj-cover-floor"></div>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $("#prj-filtrate-open-icon").on("click", function() {
        //添加历史记录
        history.pushState({
            prjCoverFloor: "prj-cover-floor"
        }, "");
        //添加sessionStorage
        sessionStorage.prjCoverFloor = true;
        //浮层显示隐藏
        $("#prj-cover-floor").attr("active") ? $("#prj-cover-floor").removeClass("active") : $("#prj-cover-floor").addClass("active");
    });

/*
 ** 监听历史记录来响应手机物理返回键
 */
window.addEventListener("popstate", function(e) {
    /*
     ** 整屏浮层
     ** 通过sessionStorage.prjCoverFloor判断 true是有浮层
     ** sessionStorage 页面存储 关闭页面会被清空
     */
    if (String(sessionStorage.prjCoverFloor) == "true") {
        $("#prj-cover-floor").removeClass("active"); //隐藏浮层
        sessionStorage.prjCoverFloor = false; //更新sessionStorage
    }
}, false);
</script>
</body>

</html>

//最早的时候想用hash或url参数来实现发现不好控制 因为点击返回时url已经变化了 
//想要取上一个url没找到方法
//这种方式实现也会有个问题 如果添加了历史记录后面没有触发返回事件 就会多一条历史记录 
//返回上个页面就要点击两次返回键
localStorage和sessionStorage是JavaScript中的两个对象,用于在浏览器中存储数据。它们提供了一种在浏览器会话期间(sessionStorage)或者永久保存(localStorage)数据的方式。 通过localStorage和sessionStorage对象,可以进行以下操作: 1. 存储数据:使用setItem()方法将数据存储到localStorage或sessionStorage中。例如: ```javascript localStorage.setItem('key', 'value'); // 存储到localStorage sessionStorage.setItem('key', 'value'); // 存储sessionStorage ``` 2. 获取数据:使用getItem()方法从localStorage或sessionStorage中获取存储的数据。例如: ```javascript var value = localStorage.getItem('key'); // 从localStorage获取数据 var value = sessionStorage.getItem('key'); // 从sessionStorage获取数据 ``` 3. 更新数据:使用setItem()方法更新已存储的数据。例如: ```javascript localStorage.setItem('key', 'new value'); // 更新localStorage中的数据 sessionStorage.setItem('key', 'new value'); // 更新sessionStorage中的数据 ``` 4. 删除数据:使用removeItem()方法从localStorage或sessionStorage中删除指定的数据。例如: ```javascript localStorage.removeItem('key'); // 从localStorage删除指定的数据 sessionStorage.removeItem('key'); // 从sessionStorage删除指定的数据 ``` 5. 清空数据:使用clear()方法清空localStorage或sessionStorage中的所有数据。例如: ```javascript localStorage.clear(); // 清空localStorage中的所有数据 sessionStorage.clear(); // 清空sessionStorage中的所有数据 ``` 需要注意的是,localStorage中存储的数据在浏览器关闭后仍然存在,而sessionStorage存储的数据只在当前会话期间有效,即当用户关闭浏览器标签页或窗口时会被清除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值