2013-08-11 2 views
1

У меня есть html-страница и простые коды jquery. Я хочу добавить текст «прочитать/непрочитанный» рядом с сообщением. Когда я нажимаю непрочитанный текст, он читается и снова читает текст, и он становится непрочитанным. Я хочу сохранить изменения jquery. Я могу изменить чтение/непрочитанный текст, но я не могу сохранить изменения с помощью localStorage. Когда я обновляю страницу каждый раз, текст становится «непрочитанным». Мои коды нуждаются в некотором восстановлении. Это мои коды. Нет. Я использую jinja2 без базы данных, а сервер не локален. спасибо за время.Как использовать localstorage с jquery (if-else)

<html> 
    <head> 
    <title>{{ title }}</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    </head> 
    <body> 

    <script> 

    $(function() { 
    $('h4').on('click', function(event) { 
     var $this = $(this); 
     $(this).text(localStorage.getItem('read')); 
     if ($this.text()==="unread"){ 
      localStorage.setItem('read', 'read'); 
     } 
     else if ($this.text()==="read"){ 
      localStorage.setItem('read', 'unread'); 
     } 
    }); 
}); 
    </script> 


    {% for data in collecteddata %} 
     <div align="center" class="box">{{ data }}</div><h4>unread</h4> 
    {% endfor %} 

    </body> 
    </html> 
+0

Я изменил свои коды, но он все еще не работает: | –

ответ

0

вам нужно использовать setItem() - установить значение и getItem() - чтобы прочитать значение

$(function() { 
    var $h4 = $('h4').on('click', function(event) { 
     var $this = $(this), text = $.trim($this.text()); 
     if (text === "unread"){ 
      localStorage.setItem('read', 'read'); 
     } else if (text === "read"){ 
      localStorage.setItem('read', 'unread'); 
     } 
     $(this).text(localStorage.getItem('read')); 
    }); 

    var text = localStorage.getItem('read'); 
    if(text){ 
     $h4.text(text); 
    } 
}); 

Демо: Fiddle

+0

он не работал. когда я обновляю страницу, она меняет :( –

+0

@ReneeWalker см. обновление –

+0

Большое вам спасибо, но есть небольшая проблема. У меня есть сообщения, и у каждого сообщения есть текст (непрочитанный) (рядом с заголовком сообщения). Когда я нажимаю один из они должны «читать» и обновлять страницу, когда «непрочитанные» сообщения будут прочитаны. –

1

Использование setItem() как

$(this).text(localStorage.getItem('read')); 
if ($this.text()==="unread"){ 
    localStorage.setItem('read','read'); 
} 
else if ($this.text()==="read"){ 
    localStorage.setItem('read','unread'); 
} 
0

Локальная работа хранения как ключ: пара значений. Вот основные сведения: - , например;

localStorage.setItem("key", "value"); // to store value in, by unique key 
var value = localStorage.getItem("key"); // retreive value by key name 
Смежные вопросы