Question

我正在尝试在应用的其他区域显示localStorage信息。我无法获取输入到localstorage textarea中的信息。

这是HTML：

<div class="main-nav" id="page" data-role="page" data-theme="a" data-add-back-btn="true">
  <div data-role="panel" id="myPanel">
    <h2 style="color:green; text-align: center;">Favorite Items</h2>
    <ul data-role="content" data-theme="c">
      <p>Enter your favorite items.</p>
      <textarea class="localstorage" id="storage" placeholder="Information here will be stored." autofocus></textarea>
      <button class="clear">Clear localStorage</button>
      <button class="empty">Empty localStorage</button>
    </ul>
    <p>You can close this panel by clicking outside of it, pressing the Esc key, or by swiping.</p>
  </div>
  <div data-role="page" id="favorites" data-theme="a" data-add-back-btn="true">
    <div data-role="header" data-theme="a" data-add-back-btn="true">
      <h1>Your favorites are listed here</h1>
    </div>
    <div data-role="content">
      <p>Click the button below to display your entry.</p>
      <!-- Javascript button to capture and display the input -->
      <button onclick="getInfo()">List Favorites</button>
      <p id="data"></p>
      </head>
    </div>
    <div data-role="footer" data-theme="a" id="footer9">
    </div>
  </div>

这是JavaScript：

var val = document.getElementById("storage").value;
document.getElementById("data").innerHTML = val;

(function() {
  var rasm = document.querySelector('.localstorage');

  function supportsLocalStorage() {
    return typeof(Storage) !== 'undefined';
  }

  if (!supportsLocalStorage()) {
    rasm.value = 'Your browser does not support localStorage.';
  } else {
    try {
      setInterval(function() {
        localStorage.setItem('autosave', rasm.value);
      }, 1000);
    } catch (e) {
      if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded!');
      }
    }

    if (localStorage.getItem('autosave')) {
      rasm.value = localStorage.getItem('autosave');
    }

    document.querySelector('.clear').onclick = function() {
      rasm.value = '';
      localStorage.removeItem('autosave');
    };

    document.querySelector('.empty').onclick = function() {
      rasm.value = '';
      localStorage.clear();
    };
  }
})();

由于某些原因，输入的信息不会显示在段落部分。

如果我可以单击按钮然后显示信息，那也很好，但是仅在段落部分显示信息就足够了。

Answer 1

非常简单，只需重新组织功能即可。

请尝试使用console.log（）来了解函数的执行顺序，因为现在就这样，它将段落设置为空值。

将下面的行移动到函数的结尾：

var val = document.getElementById("storage").value;
document.getElementById("data").innerHTML = val;

这样，它甚至无法在您那里获取需要在其中写入的值的情况下运行。

您必须重新加载页面才能看到文本区域中发生的更改（以及保存到本地存储的内容），因为在当前实现中，没有其他方法可以重新渲染页面。

祝你好运。

jQuery移动本地存储

1 个答案: