Adding localstorage to multiple textareas and inputs

Question

I am working on a project with multiple textareas that will be editable to others.

I have started using localstorage to allow the inputted contents to be saved on the browser.

This works fine, but I can only get it to work on one text area in the document. I know this means I will need to duplicate and rename some aspect of the JS code, but I am at a loss after trying several different ways. I figure I'd ask the pros.

The HTML (some of it anyway)

<div id="columns">

    <ul id="column1" class="column">
        <li class="widget color-red" id="edit1" contenteditable="true">  
            <div class="widget-head">
                <h3>Widget title</h3>
            </div>
            <div class="widget-content">
            <textarea class="outer" id="persisted-text" rows=5 cols=30></textarea>

            </div>
        </li>
        <li class="widget color-red">  
            <div class="widget-head">
                <h3>Widget title</h3>
            </div>
            <div class="widget-content">
                <textarea class="outer" rows=5 cols=30></textarea>
            </div>
        </li>
    </ul>

and the JS/Jquery:

 var supported = 'This text will be saved locally, forever.',
      unsupported = 'Oh no! Your browser does not support localStorage.';
  if (window.localStorage) {
      var p = document.querySelector('#persisted-text');
      if (localStorage.text == null) {
          localStorage.text = p.value = supported;
      } else {
          p.value = localStorage.text;
      }
      p.addEventListener('keyup', function(){ localStorage.text = p.value; }, false);
  } else {
      document.getElementById('persisted-text').value = unsupported;
  }

The trigger of id="persisted-text" works fine with the first text area, but does not do anything to the others. What portion of this code would I need to change/add to to start adding multiple localstorage textareas? Also, a jsfiddle if it helps: http://jsfiddle.net/6LdfD/6/ Thanks!

you already asked this question in jst the last few hours....deleting it to ask again and bump to top of most recent is inappropriate — charlietfl
– charlietfl, Commented Dec 1, 2013 at 7:43
Charlietfl, the other question is in fact not deleted. It was about how to implement localstorage, as this was new to me as well. It is still there and an answer is selected. Now, unfortunately, I still need help with a different aspect of the same project. Sorry if there was confusion, I do appreciate the response. — user1560525
– user1560525, Commented Dec 1, 2013 at 7:51

Arun P Johny · Accepted Answer · 2013-12-01 08:56:12Z

Add a unique identifier like name to the textarea and a class to the textarea like

<textarea class="outer persisted-text" name="pt1" id="persisted-text" rows=5 cols=30></textarea>

then

var supported = 'This text will be saved locally, forever.',
    unsupported = 'Oh no! Your browser does not support localStorage.';
if (window.localStorage) {
    $('.persisted-text').keyup(function () {
        localStorage.setItem(this.name, this.value);
    }).val(function () {
        return localStorage.getItem(this.name) || supported
    })
} else {
    $('.persisted-text').val(unsupported);
}

Demo: Fiddle

Try

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>SO - 20309870 - jsFiddle demo by arunpjohny</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>




<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
var supported = 'This text will be saved locally, forever.',
    unsupported = 'Oh no! Your browser does not support localStorage.';
if (window.localStorage) {
    $('.persisted-text').keyup(function () {
        localStorage.setItem(this.name, this.value);
    }).val(function () {
        return localStorage.getItem(this.name) || supported
    })
} else {
    $('.persisted-text').val(unsupported);
}
});//]]>  

</script>


</head>
<body>
  <div id="columns">
    <ul id="column1" class="column">
        <li class="widget color-red" id="edit1" contenteditable="true">
            <div class="widget-head">
                 <h3>Widget title</h3>

            </div>
            <div class="widget-content">
                <textarea class="outer persisted-text" name="pt1" id="persisted-text" rows="5" cols="30"></textarea>
            </div>
        </li>
        <li class="widget color-red">
            <div class="widget-head">
                 <h3>Widget title</h3>

            </div>
            <div class="widget-content">
                <textarea class="outer persisted-text" name="pt2" rows="5" cols="30"></textarea>
            </div>
        </li>
    </ul>






</div></body></html>

Thats great! thanks. However, I works fantastic in jsfiddle, but I cannot get it to behave the same way out of it. I copy pasted all of it to it's own document, I also tried by copying the frame source. It either is blank and will not save, or it has the last part of your JS function () { return localStorage.getItem(this.name) || supported }) } in the text area

Collectives™ on Stack Overflow

Adding localstorage to multiple textareas and inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related