Почему мой код localStorage не работает?

Question

Я пытаюсь заставить div div исчезнуть и остаться пропавшим, даже когда пользователь возвращается.Кажется, он не делает то, что я хочу.Когда я нажимаю кнопку, ничего не происходит.Не меняется даже значение localStorage ...

localStorage.done = localStorage.done || false;
$('#myButton').addEventListener('click', function() {
    if (!localStorage.done) {
        localStorage.done = true;
        $('#myDiv').style.display = "none";

    }
});

Answer 1

Ваш код для localStorage фактически работает (даже если он предложил использовать его методы получения / установки вместо прямого доступа к свойству).

Ваша проблема заключается в следующем:

$('#myButton').addEventListener('click', function() {

jQuery не знает о .addEventListener вы хотите просто позвонить .bind()

    localStorage.done = localStorage.done || false;
    $('#myButton').bind('click', function() {
        if (!localStorage.done) {
            localStorage.done = true;
            $('#myDiv').hide();
        }
    });

Answer 2

localStorage хранит только строки . Таким образом, localStorage.done = false сериализуется в «false». Следующий код решит вашу проблему (см. JSFiddle ):

 localStorage.done = localStorage.done || "false";
 document.getElementById('myButton').addEventListener('click', function() {
   if (localStorage.done == "false") {
     localStorage.done = "true";
     document.getElementById('myDiv').style.display = "none";
   }
 });

Обратите внимание, чтобы избежать путаницы с jQuery, я использовал стандартный DOM "getElementById". Вы также можете использовать «0» и «1» вместо «true» и «false».

Хотя это ограничение отсутствует в спецификации W3 , оно применяется к текущим браузерам. См. этот пост для получения дополнительной информации. Удачного кодирования!