title: Adding localstorage to multiple textareas and inputs
body: <p>I am working on a project with multiple textareas that will be editable to others.</p>
  
  <p>I have started using localstorage to allow the inputted contents to be saved on the browser.</p>
  
  <p>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.</p>
  
  <p>The HTML (some of it anyway)</p>
  
  <pre><code>&lt;div id="columns"&gt;
  
      &lt;ul id="column1" class="column"&gt;
          &lt;li class="widget color-red" id="edit1" contenteditable="true"&gt;  
              &lt;div class="widget-head"&gt;
                  &lt;h3&gt;Widget title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="widget-content"&gt;
              &lt;textarea class="outer" id="persisted-text" rows=5 cols=30&gt;&lt;/textarea&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="widget color-red"&gt;  
              &lt;div class="widget-head"&gt;
                  &lt;h3&gt;Widget title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="widget-content"&gt;
                  &lt;textarea class="outer" rows=5 cols=30&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and the JS/Jquery:</p>
  
  <pre><code> 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;
    }
  </code></pre>
  
  <p>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: <a href="http://jsfiddle.net/6LdfD/6/" rel="nofollow">http://jsfiddle.net/6LdfD/6/</a>
  Thanks!</p>