Question

我正在使用HTML，JavaScript和CSS制作应用程序，为孩子们准备了几个小游戏（如拼图，订单，绘画和绘画......）。我有索引页面，其中包含每个游戏页面的链接，一旦游戏结束，它会直接重定向到索引页面，所有这些都在同一个浏览器标签页中。

我想知道的是，如果有某种方式可以知道玩家何时完成一个游戏，那么之后游戏将被锁定，一旦玩家完成所有游戏，它将解锁一个特殊奖品或某事。

我尝试使用本地存储，但问题是，一旦我玩了一个游戏，它就会保持锁定状态，因为即使我关闭了浏览器，本地存储也会保留在我已经玩过的内存中。是否有任何方法可以使用本地存储＆＃34;失去其内存＆＃34;关闭浏览器后？或者是否有比本地存储更有效的方式？

非常感谢任何帮助！

Answer 1

您可以使用SessionStorage。根据定义“它会持续存在于同一个标签中”，这意味着一旦页面关闭，存储就会丢失。

参考：https://code.google.com/p/sessionstorage/

Answer 2

作为一个例子，你可以遵循这个我希望它可以帮助你...

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

</body>
</html>

尝试google sessionstorage for html，有很多例子。好运!!

Answer 3

为您好好阅读：http://www.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

以下是您可以对本地存储做的事情：

加载页面后，设置本地存储并将所有游戏设置为incomplete

创建store()和check()功能，以帮助您轻松完成任务

function store(game, status){
    localStorage.setItem(game, status);
}
function check(game){
    return localStorage.getItem(game);
}

window.onload = function() {
    store("puzzle1", false);
    store("puzzle2", false);
    store("puzzle3", false);
}

当用户完成游戏时，您可以更改存储中的数据：

someEvent() {
    store("puzzle1", true);
}

然后在游戏结束时，或者在游戏开始页面上运行一些检查：

//if puzzle1 is true
if(check("puzzle1")) {
     //do Stuff
}

我相信这应该适合你。

如何知道用户是否完成了所有任务？

3 个答案: