Question

我有this code：

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}
function onReady() {
    if (localStorage["piecesArray"]) {
        piecesArray = new Array();
        piecesArray.length = 0; 
        piecesArray = localStorage.getObj("piecesArray");
    } else {
        piecesArray = new Array();
    }
    can = document.getElementById('myCanvas');
    ctx = can.getContext('2d');         
    img = new Image();
    img.onload = onImage1Load;
    img.src = "http://www.niagaraparks.com/images/wallpaper/niagarafalls_640x480.jpg";
}

我想在localStorage中保存游戏状态，刷新页面后我想刷新游戏状态。

我做错了什么？

Answer 1

所以，我在你的小提琴中注意到了两个问题。

首先，您有一个未定义的功能，因此您没有运行setObj功能。

if (drawHighlight) highlightRect(drawX, drawY);
// liczymy kliknięcia
clickCounter(); // This function doesn't exist
localStorage.setObj("piecesArray", piecesArray);

我为您添加了一个虚拟clickCounter函数，但没有做任何事情。

此外，您正在从本地存储加载piecesArray，但无论如何只是覆盖它。加载图片后，您需要检查是否已有piecesArray。我是这样做的：

function onImage1Load() {
    var r;
    if (piecesArray.length === 0) {
        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 3; j++) {
                r = new Rectangle(i * blockSize, j * blockSize, i * blockSize + blockSize, j * blockSize + blockSize);
                piecesArray.push(r);
            }
        }

        scrambleArray(piecesArray, 30);
    }
    drawImage();

}

<强> Working Fiddle

Answer 2

使用

设置项目

localStorage.setItem(key, JSON.stringify(yourValue));

并使用

获取项目

JSON.parse(localStorage.getItem(yourValue));

如果localStorage中没有存储任何值，您将获得“null”。所以你可以使用：

var pieces = localStorage.getItem('piecesArray');
if (pieces) {
    piecesArray = JSON.parse(pieces);
} else {
    piecesArray = new Array();
}

在localStorage中保存游戏玩法

2 个答案: