Question

我正在制作一款使用Cookie（NOM NOM NOM Cookie，而不是网络浏览器Cookie）作为货币的游戏。

var cookies = 0;
function cookieClick(number){
    cookies = cookies + number;
    document.getElementById("cookies").innerHTML = cookies;
}

现在我需要保存cookie的数量，这样当用户刷新页面时，cookie的数量将会持续存在。

我该怎么做？

Answer 1

对于 cookies ，您似乎并不意味着我们在这里的意思。你只需要存储一个名为cookies的计数器。

您可以按照建议使用window.localStorage。

function consumeCookies (n) {
    var n = n ? n : 1;
    var util = localStorage.getItem("util");
    util = util ? util : "{}";
    util = JSON.parse(util);
    util.cookies = util.cookies ? util.cookies + n : n;
    util = JSON.stringify(util);
    return localStorage.setItem("util", util);
}
// For consuming 42 cookies ...
consumeCookies(42);

请注意，这里存储了整个包属性，而不仅仅是普通的(key,value)。这可能是一个更好的设计选择，但它符合您的口味。

在同一名称空间中，您现在可以存储其他属性，例如播放器的名称：

function loadUtil () {
    var util = localStorage.getItem("util");
    util = util ? util : "{}";
    util = JSON.parse(util);
    return util;
}

function storeUtil (util) {
    return localStorage.setItem("util", JSON.stringify(util));
}

function setName (name) {
    var util = loadUtil();
    util.name = name ? name : "Ulysses";
    return storeUtil(util);
}

并轻松访问应用程序其他部分的整个JSON。

查看here。

虽然这可能有点矫枉过正，但在这种情况下，另一个更好的选择是偏爱。

Answer 2

存储

Web Storage API的存储界面提供对特定域的会话存储或本地存储的访问，允许您添加，修改或删除存储的数据项。

如果要操作域的会话存储，请调用 Window.sessionStorage 方法;如果您想操作域的本地存储，请调用 Window.localStorage 。

https://developer.mozilla.org/en-US/docs/Web/API/Storage

将cookies的值存储在Window.localStorage中以使其保持不变直到用户清除缓存，或Window.sessionStorage使其保持不变直到用户关闭浏览器窗口。然后更新页面加载的值（如果存在）。

（Demo）

var cookies = 0;
if(localStorage.cookies) cookies = localStorage.getItem('cookies');
document.getElementById("cookies").innerHTML = cookies;
function cookieClick(number){
    cookies = parseInt(cookies) + number;
    document.getElementById("cookies").innerHTML = cookies;
    localStorage.setItem('cookies', cookies);
}

如何存储持久数据？

2 个答案:

存储