Question

So Im trying to make a simple sticky-note thingy using localstorage where you can type and its saves automatically.

I get a problem when ever I press linebreak. Localstorage doesn’t apply the line break.

HTML:

<div contenteditable="true" class="s_content">Type something, press linebreak and type something again. Then refresh</div>​

JS:

$('div.s_content').text(localStorage.getItem ("foo"))

$("div.s_content").on("keyup paste", function () {
localStorage.setItem ("foo", $('div.s_content').text())
});​

Example: http://jsfiddle.net/z2e6Y/

Try to type something, press return and type something more. Then refresh the page.

How can I apply the <br> / line-break onto localstorage?

Answer 1

Change both of your .text() calls to .html() and it should work:

$('div.s_content').html(localStorage.getItem ("foo"))

$("div.s_content").on("keyup paste", function () {
   localStorage.setItem ("foo", $('div.s_content').html());
});​

http://jsfiddle.net/k4dWX/3/

Since you are using is a tag, the data inside is HTML and not just text. So you need to set the content of div.s_content to HTML with br or div tags, rather than just line breaks. If you are pulling the text from somewhere else, you need to convert linebreaks to br or div tags first.