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

Question

I am making kind of an app using only HTML, JavaScript and CSS, with several little games for kids (like puzzles, order words, draw and paint...). 我正在制作仅使用HTML，JavaScript和CSS的应用程序，并为孩子们准备了一些小游戏（例如拼图，订购单词，绘画和绘画...）。 I have the index page with links to the pages of each game, and once the game is over, it redirects directly to the index page, all in the same browser tab. 我有索引页面，该页面具有指向每个游戏页面的链接，一旦游戏结束，它将直接重定向到索引页面，所有页面都位于同一浏览器选项卡中。

What I would like to know is if there is some way of knowing when the player has completed one game, so after that, the game would be locked, and once the player has completed all games, it would unlock a special prize or someting. 我想知道的是，如果有某种方式可以知道玩家何时完成了一场游戏，那么此后，游戏将被锁定，并且一旦玩家完成了所有游戏，它将解锁特别奖品或某种东西。

I have tried with local storage, but the problem is that once I've played one game, it will stay locked, because the local storage keeps in memory that I have played it, even if I close the browser. 我尝试使用本地存储，但是问题是，一旦我玩了一个游戏，它将保持锁定状态，因为即使关闭浏览器，本地存储也会保留我玩过的内存。 Is there any way of using local storage with it "losing its memory" once you close the browser? 关闭浏览器后，是否可以使用本地存储“丢失其内存”？ Or is there a more efficient way than local storage? 还是有比本地存储更有效的方法？

Any help would be much appreciated! 任何帮助将非常感激！

Answer 1

You can use the SessionStorage . 您可以使用SessionStorage 。 By definition "it persists in the same tab", meaning that once the page is closed, the storage is lost. 根据定义，“它保留在同一选项卡中”，这意味着一旦关闭页面，存储就会丢失。

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

Answer 2

as an example you can follow this i hope it helps you... 举个例子，你可以遵循这个，我希望它可以帮助你...

<!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>

try to google sessionstorage for html, there are many examples..good luck!! 尝试谷歌sessionsage为HTML，有很多例子..祝你好运！

Answer 3

A good read for you : http://www.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/ 给您的好书： http : //www.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

Here is what you can do with regards to local storage : 关于本地存储，您可以执行以下操作：

When the page is loaded set up your local storage and set all games to incomplete 加载页面后，设置您的本地存储并将所有游戏设置为incomplete

Create a store() and check() function to help you out and make things easier 创建一个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);
}

As the user completes the game you can alter the data inside the storage : 当用户完成游戏时，您可以更改存储中的数据：

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

and then at the end of the game, or on your games starting page just run some checks : 然后在游戏结束时或在游戏开始页面上运行一些检查：

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

I believe that should work for you. 我相信这应该为您工作。

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

问题描述

3 个解决方案

解决方案1
1 2014-07-03 15:52:28

解决方案2
1 2014-07-03 15:59:22

解决方案3
1 已采纳 2014-07-03 16:08:05

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

问题描述

3 个解决方案

解决方案1 1 2014-07-03 15:52:28

解决方案2 1 2014-07-03 15:59:22

解决方案3 1 已采纳 2014-07-03 16:08:05

解决方案1
1 2014-07-03 15:52:28

解决方案2
1 2014-07-03 15:59:22

解决方案3
1 已采纳 2014-07-03 16:08:05