1

I have a html page and simple jquery codes. I want to add "read/unread" text near a post. When I click unread text it becomes read and click again read text it becomes unread. I want to save my jquery changes. I can change read/unread text but I cant save changes with using localStorage. When I refresh page everytime text becomes "unread". My codes need some restore. These are my codes.Not:I use jinja2 no database no server just local. thanks for time.

 <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>
Improve this question
1
  • I changed my codes but it still doesnt work :| Commented Aug 11, 2013 at 14:34

3 Answers 3

Reset to default
1

Use setItem() like

$(this).text(localStorage.getItem('read')); if ($this.text()==="unread"){ localStorage.setItem('read','read'); } else if ($this.text()==="read"){ localStorage.setItem('read','unread'); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

you need to use setItem() - to set value and getItem() - to read value

$(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); } });

Demo: Fiddle

Improve this answer

4 Comments

thank you very much but there is little problem. I have posts and every post has a text(unread) (near the post title). when I click one of them to do "read" and refresh the page every post's "unread" becomes read.
@ReneeWalker then you need to store the data using the post id... or some other identifier otherwise we cannot distinguish which one was read
Actually these are not posts. I use jinja2 and render some data. For example I render list items and write a html page. How can I use identifier?
@ReneeWalker the identifier has to be decided by the server... i don't know anything about the server side technology used here... the server should always give the same id to a particular post always...
0

Local storage work as key:value pair. Here are the basics:- e.g.; 

localStorage.setItem("key", "value"); // to store value in, by unique key var value = localStorage.getItem("key"); // retreive value by key name
Improve this answer

Comments