javascript - 每次单击不同的按钮时，Textarea 中的文本都会发生变化

Question

我正在尝试为存储在 textareas 中的文档创建一个站点。布局很简单，一个包含文本的文本区域，顶部有一个导航栏。导航栏包含名为 Page 1 、 Page 2 < page 3 等的元素。

当我点击第 1 页时，textarea 必须显示我过去在第 1 页中写的内容。当我单击第 2 页时，它应该会显示我过去在第 2 页中写的内容。很像浏览器标签。我不知道我该怎么做。

为了存储我在 textareas 中写入的文本，我使用了带有 hidden 属性的 a，因此我可以在其中存储文本而不会被看到。所以当我在导航栏中点击“Page 1”时，它将对第1页中包含文本的分区进行操作，并将其粘贴到textarea.value中。

脚本是这样的：

function functionPageOne(){
   var textarea= document.getElementById('textarea');
   var btnp1 = document.getElementById('Page1Btn');
   var div1 = document.getElementById('Page1Div');
   btnp1.onclick = funnction(){
      textarea.value = div1.innerHTML; 
      alert('You are now in document 1')
   }
}

我真正的问题是如何创建像第 1 页一样工作的新文档。它应该能够创建一个单独的 DIV，其具有可通过添加按钮访问脚本的新 ID。我希望我的问题是有道理的。

标签： javascripthtmljquerycss

Answer 1

您可以使用文档来源的localStorage API 来存储上一页数据，并在下次从存储中准备好它。可以明智地存储数据页面，例如：

{
   page1: "<data>",
   page2: "<data>"
}