倒数计时器结束后清除(本地存储,会话存储)?

时间:2016-08-01 21:15:00

标签: javascript html timer local-storage

我有倒数计时器的代码,它存储在会话存储中,它工作正常,但我需要添加更多功能,如

  • 如果用户在倒数计时器被清除之前离开该站点 本地会议
  • 在倒数计时器结束时清除本地会话

索引页: -

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="Author" content=""/>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="myform"></div>
<b><p>this is the index page</p></b>
    <form id="" name="myform" action="submit.html" method="post">

    </form>
<script src="timer.js"></script>
</body>
</html>

提交页面: -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>

            <h1>submit is working</h1>



    </body>
</html>

timer.js

if(sessionStorage.getItem("total_seconds")){
    var total_seconds = sessionStorage.getItem("total_seconds");
} else {
    var total_seconds = 60*1;
}
var minutes = parseInt(total_seconds/60);
var seconds = parseInt(total_seconds%60);
function countDownTimer(){
    if(seconds < 10){
        seconds= "0"+ seconds ;
    }if(minutes < 10){
        minutes= "0"+ minutes ;
    }

    document.getElementById("myform").innerHTML = "الزمن المتبقى "+seconds+" : "+minutes;
    if(total_seconds <= 0){
        setTimeout("document.myform.submit()",1);

    } else {
        total_seconds = total_seconds -1 ;
        minutes = parseInt(total_seconds/60);
        seconds = parseInt(total_seconds%60);
        sessionStorage.setItem("total_seconds",total_seconds)
        setTimeout("countDownTimer()",1000);
    }
}
setTimeout("countDownTimer()",1000);

2 个答案:

答案 0 :(得分:2)

你可以做这样的事情

function clearCountdown() {
    sessionStorage.removeItem("total_seconds")
};

window.onunload = clearCountdown();

在你的函数中更新if as

if(total_seconds <= 0){
        clearCountdown();
        setTimeout("document.myform.submit()",1);

答案 1 :(得分:0)

Session Storage
===============

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();


//Clear storage after specific time
var logoutTimer = setTimeout(function() { sessionStorage.clear(); }, (60 * 60 * 1000)); // 24 hours

Local Storage
===============
// Save data to localStorage
localStorage.setItem('key', 'value');

//Clear storage after specific time
var logoutTimer = setTimeout(function() { localStorage.clear(); }, (60 * 60 * 1000)); // 24 hours