Question

我有一个本地运行的HTML / CSS / Jquery网页，我用于一个项目。

我正在尝试实现我刚学到的两件事，即使页面上的所有文本区域都可以编辑，以便访问它，然后尝试使用localstorage来保存编辑者的编辑。

这是我所拥有的片段，（其余部分只是行和列的延续）：这也是HTML，它也可以编辑（这个工作）

<div id="columns">

    <ul id="column1" class="column">
        <li class="widget color-red" contenteditable="true">  
            <div class="widget-head" id="persisted-text">
                <h3>Widget title</h3>
            </div>
            <div class="widget-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>

            </div>
        </li>
        <li class="widget color-red">  
            <div class="widget-head">
                <h3>Widget title</h3>
            </div>
            <div class="widget-content">
                <p id="persisted-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
            </div>
        </li>
    </ul>

和JS：

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

这也有效，如果我创建一个textarea并添加id，但它只适用于其中一个区域。如果可能的话，我理想地喜欢这两者（可编辑和本地存储）的组合。我错过了什么？

我还加载了这个http://jsfiddle.net/6LdfD/2/

的jsfiddle

感谢您寻找

Answer 1

在我的演示中，我选择了p并拥有contenteditable的所有元素。您还可以使用类来标识要与其一起使用的元素。我根据元素在网页上的位置将元素与其数据相关联，因此第一个<p contenteditable="true"></p>代码与localStorage['editable0']相关联。如果您移动标记，这可能会有问题，因此您可能希望在每个元素上放置一个标记（类或数据属性），并使用它来标识每个元素。这应该让你开始，你可以扩展它，并根据你的需要进行调整。

Live demo here (click).

var editables = document.querySelectorAll('p[contenteditable]');

for (var i=0; i<editables.length; ++i) {
  var prop = 'editable'+i;
  if (localStorage[prop]) { //restore content from cache if it exists
    editables[i].textContent = localStorage[prop];
  }
  addKeyup(editables[i], prop);
}

function addKeyup(elem, prop) {
  elem.addEventListener('keyup', function() {
    store(prop, this.textContent); 
  }); 
}

function store(prop, val) {
  localStorage[prop] = val;
  console.log(prop);
  console.log(localStorage[prop]);
}

您的标记可能如下所示：

  <p contenteditable="true">Some text.</p>
  <p contenteditable="true">Some text.</p>
  <p contenteditable="true">Some text.</p>
  <p contenteditable="true">Some text.</p>
  <p contenteditable="true">Some text.</p>

Answer 2

所以这里有几个代码问题，

多个ID，html标准不允许
你不能在有争议的孩子身上设置keyup / input事件，
而不是'value'，您必须更改节点的innerText属性。

所以这里是对你的代码进行最小更改的演示（请注意，我没有最好的paragrpah索引（只是按照出现的顺序）

HTML：

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

            </div>
            <div class="widget-content">
                <p class="persisted-text" contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
            </div>
        </li>
        <li class="widget color-red">
            <div class="widget-head">
                 <h3>Widget title</h3>

            </div>
            <div class="widget-content">
                <p class="persisted-text" contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
            </div>
        </li>
    </ul>
</div>

JS

  var supported = 'This text will be saved locally, forever.',
      unsupported = 'Oh no! Your browser does not support localStorage.';
  if (window.localStorage) {
      var ps = document.querySelectorAll('.persisted-text');
      //localStorage.text=localStorage.text||[];
      for (var n = 0; n < ps.length; n++) {
          var p = ps[n];
          if (localStorage['text' + n] === undefined) {
              localStorage['text' + n] = p.innerText = supported;
          } else {
              p.innerText = localStorage['text' + n];
          }
          console.log(p);
          document.addEventListener('input', (function (p, n) {
              return function (e) {
                  console.log(e, "111");
                  localStorage['text' + n] = p.innerText;
              };
          })(p, n));
      }
  } else {
      var ps = document.getElementsByClassName('persisted-text');
      for (var n = 0; n < ps.length; n++) {
          var p = ps[n];
          p.innerText = unsupported;
      }
  }

http://jsfiddle.net/6LdfD/5/

Localstorage到可编辑文档中的多个字段

2 个答案: