Сохранить пользовательский ввод на HTML-странице, используя веб-хранилище HTML5 - PullRequest
Новая
       3

Сохранить пользовательский ввод на HTML-странице, используя веб-хранилище HTML5

1 голос
/ 29 августа 2011

Я создаю веб-приложение для кроссвордов, которое извлекает данные XML с сервера, анализирует данные с помощью javascript и создает головоломку на странице с помощью тега [canvas].Когда пользователь выбирает подсказку и вводит правильный ответ, буквы помещаются в соответствующие квадраты кроссворда.

Вот фрагмент кода, который помещает буквы в соответствующие квадраты: 

function answer() {
if (this.value != '') {
    var letters = this.value.split('');
    var correct = xmlhttp.responseXML.getElementsByTagName(node)[0].getAttribute('a').split('');
    var numCorrect = 0;
    for (var i = 0; i < selected.length; i++) {
        if (letters[i]) {
            if (letters[i].toUpperCase() == correct[i]) {
                eval('ctx.drawImage(i'+letters[i].toLowerCase()+'b, '+((selected[i].id%15)*26)+', '+(Math.floor(selected[i].id/15)*26)+')');
                matrix[selected[i].id] = 1;
                numCorrect++;
            } else {
                matrix[selected[i].id] = 0;
            }
        }
    }       
    if (numCorrect == correct.length) {
        alert('Correct!');
        clearSelection();

    } else if (numCorrect == 0) {
        alert('Incorrect, try again.');
        document.getElementById('answer').value = '';
        document.getElementById('answer').focus();
    } else if (numCorrect != correct.length) {
        alert('Only some letters are correct.');
        clearSelection();
    }
    checkForWin();      
}
}

Мой вопрос заключается в том, как сохранить состояние головоломки и XML (используя веб-хранилище HTML5), чтобы пользователь мог играть в автономном режиме и чтобы он не терял свой прогресс в случае обновления браузера?

Может ли кто-нибудь помочь мне с этим, я не очень знаком с API веб-хранилища HTML ... но я слышал, что это ценный инструмент для веб-приложений.Ваш совет будет высоко оценен.

Спасибо, Карлос

Ответы [ 2 ]

1 голос
/ 29 августа 2011

Вы можете сохранить объект JSON или состояние вашей программы в локальном хранилище html5, используя следующий javascript: 

if(localStorage)
 localStorage.setItem("NAME", JSON/XML Object);

, затем вы можете получить его позже, используя 

var savedGame = localStorage["NAME"];

Одно предупреждение, однако, оно будет работать во всех браузерах, кроме IE, потому что они используют что-то другое в качестве локального хранилища.

0 голосов
/ 29 августа 2011

Если остальная часть вашего приложения не зависит от HTML5, вы можете подумать об использовании такой библиотеки, как Lawnchair , чтобы обернуть localStorage, а также предоставить альтернативные реализации для других браузеров, которые имеют механизм хранения, но не localStorage. Если вы все-таки выберете Lawnchair, я бы порекомендовал соединить его с lccache .

Если вы решите пропустить Lawnchair и остаться только с локальным хранилищем, тогда я предложу вам соединить его с lscache . И lscache, и lccache являются оболочками, которые сокращают API до простого:

value = l (c / s) cache.get ("ключ");

l (c / s) cache.set («ключ», значение);

л (с / с) cache.remove ( "ключ");

Это примерно так же просто, как можно сохранить вещи, вернуть их назад и т. Д. Кроме того, для вещей, которые вы хотите хранить только какое-то время. Когда вы помещаете его в кеш с набором, вы можете указать, как долго он истекает.

...