Question

我正在开发一个包含多个textareas的项目，可以编辑给其他人。

我已经开始使用localstorage来允许输入的内容保存在浏览器中。

这很好用，但我只能让它在文档中的一个文本区域上工作。我知道这意味着我需要复制并重命名JS代码的某些方面，但在尝试了几种不同的方法后我感到很茫然。我想我会问专业人士。

HTML（其中一些反正）

<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>

和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;
  }

id =“persisted-text”的触发器可以与第一个文本区域一起使用，但不会对其他文本区域执行任何操作。我需要更改/添加此代码的哪一部分才能开始添加多个localstorage textareas？另外，jsfiddle如果有帮助：http://jsfiddle.net/6LdfD/6/ 谢谢！

Answer 1

将类似名称的唯一标识符添加到textarea，将类添加到textarea，如

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

然后

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

演示：Fiddle

尝试

<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>

将localstorage添加到多个textareas和输入

1 个答案: