可编辑文档中多个字段的本地存储

Localstorage to multiple fields in a editable document

本文关键字：存储 字段 编辑 文档      更新时间：2023-12-25

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

我正在尝试实现我刚刚学到的两件事，即让页面上的所有文本区域对访问它的人都是可编辑的，然后尝试获得本地存储来为编辑人员保存编辑。

这是我所拥有的一个片段（其余部分只是行和列的延续）：这是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;
  }

如果我创建一个文本区域并添加id，这也可以，但它只适用于其中一个区域。如果可能的话，我希望两者结合（可编辑和本地存储）。我错过了什么？

我还加载了一个jsfiddlehttp://jsfiddle.net/6LdfD/2/

感谢您查看

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

现场演示（点击）。

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>

因此，您的代码存在几个问题

  1. 多个id，html标准不允许
  2. 您不能在可竞争的子项上设置keyup/input事件
  3. 您必须更改节点的innerText属性，而不是"value"

所以这里是对你的代码进行最小更改的演示（请注意，我并没有为pararpah索引做最好的处理（只是为了出现的顺序）

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/

相关文章：