используя localStorage в HTML5 - PullRequest
       10

используя localStorage в HTML5

0 голосов
/ 25 февраля 2012
<form>
<input name="Team1" id="team1" type="text" value="Team1?">
<button id="dostuff" value="Go">Go</button>
</form>

<div id ="nicteamcolumn">Team: </div>

<script>
$('#dostuff').click(function(e) {

var team1 = $('input[name="Team1"]').val();

if (typeof(Storage) !== "undefined") {
            if (localStorage.teamlist) {
                localStorage.teamlist= localStorage.teamlist + team1;

            }
            else {
            localStorage.teamlist = " ";    
            }

            $('#nicteamcolumn').html("Team:" + "<br>" + localStorage.teamlist + "<br>")
      }
}
</script>

Обычно, когда нажимается кнопка, я беру ввод от Team1, добавляю его к localStorage.teamlist и меняю html #nicteamcolumn на localStorage.teamlist

При первом нажатии на кнопку получаю странный вывод. Он печатает значение для команды 1 тонну раз за разом. Второй щелчок и включение работают нормально, а также когда я закрываю страницу, возвращаюсь и продолжаю добавлять в список.

Любая помощь будет принята с благодарностью?

1 Ответ

1 голос
/ 25 февраля 2012

Он печатает значение для команды 1 тонну раз за разом. Кажется, что работает второй щелчок и над

Это потому, что localStorage объект постоянный .Даже когда исходный код вашего скрипта изменится, значения localStorage все равно будут существовать.Возможно, вы путаете localStorage с sessionStorage.

Исправление вашего кода:

  • Исправьте синтаксическую ошибку, поместив ); после последнего}.
  • typeof не является функцией, пожалуйста, не делайте ее похожей на одну, удалив скобки.
  • Самый первый раз, Ничего не будет печататься, потому что вы добавляете пробел вместо значения Team1.
  • Вместо прямой установки свойства, рекомендуется использовать методы .getItem и .setItem, чтобы избежать ошибок при использовании конфликтующих имен ключей.
  • Ваш текущий "список" представляет собой набор объединенной строки.Это не так легко поддерживать.Либо используйте уникальный разделитель для разделения ваших значений, либо используйте JSON.stringify и JSON.parse для хранения реальных массивов.

Демонстрация: http://jsfiddle.net/BXSGj/

Код (с использованием JSON):

$('#dostuff').click(function(e) {
    e.preventDefault(); // Prevent the form from submitting
    var team1 = $('input[name="Team1"]').val();
    if (typeof Storage !== "undefined") {
        // Will always show an array:
        var teamlist = JSON.parse(localStorage.getItem('teamlist') || '[]');
        teamlist.push(team1);
        localStorage.setItem('teamlist', JSON.stringify(teamlist));
        $('#nicteamcolumn').html("Team:<br>" + teamlist.join('<br>') + "<br>");
    }
});

Использование разделителя (только с разными строками):

        var SEP = '|'; // Separator example
        var teamlist = (localStorage.getItem('teamlist') || '').split(SEP);
        teamlist.push(team1);   // Still the same
        localStorage.setItem('teamlist', teamlist.join(SEP));

Чтобы удалить сохраненные элементы, используйте localStorage.removeItem method:

localStorage.removeItem('teamlist');

См. также: Таблица совместимости для объекта Storage.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...