Javascript 每次单击其他按钮时，文本区域中的文本都会发生更改

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

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

为了存储我在textareas中写入的文本，我使用了一个带有hidden属性的，这样我就可以在那里存储文本而不被看到。因此，当我在导航栏中单击“第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，该DIV具有一个新的ID，可以通过add按钮访问脚本。我希望我的问题有意义。

我想你需要的是一个数据库。这是存储将再次重用的唯一数据的最佳方法

---

考虑到这是一个JavaScript项目，我强烈推荐。

我认为您需要的是一个数据库。这是存储将再次重用的唯一数据的最佳方法

考虑到这是一个JavaScript项目，我强烈推荐。

您可以使用文档来源的API存储上一页数据，并在下次存储时准备好它。可以按如下方式逐页存储数据：

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

{
第1页：“，
第2页：“
}

您可以使用文档来源的API存储上一页数据，并在下次存储时准备好它。可以按如下方式逐页存储数据：

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

{
第1页：“，
第2页：“
}

只需创建一个变量来存储选项卡的内容，并创建按钮来切换选项卡

单击按钮时，将选项卡的旧值存储到变量，然后显示所选选项卡的值

如果文档需要与其他用户共享，或者数据必须持续存在，则需要一个数据库。但是，如果只需要向当前用户显示文档，则可以使用localstorageapi

var tabContents={
表0:“”，
tab1:“第一个tab的内容”，
tab2:“第二个tab的内容”，
tab3:“第三个选项卡的内容”，
}
var lastTab=0；
//从本地存储加载
//如果（window.localStorage.tabContents！=未定义）tabContents=JSON.parse（window.localStorage.tabContents）；
功能选项卡（idx）{
var textarea=document.getElementById（'textarea'）；
//保存最后一个选项卡的值
var tabnameLast=“tab”+lastTab.toString（）；
tabContents[tabnameLast]=textarea.value；
lastTab=idx；
//显示新选项卡的值
var tabname=“tab”+idx.toString（）；
textarea.value=tabContents[tabname]；
//保存到本地存储
//window.localStorage.tabContents=JSON.stringify（tabContents）；
}
函数newtab（）{
//var newtabIdx=tabContents.length；
var newtabIdx=Object.keys（tabContents.length）；
var newtabName=“tab”+newtabIdx.toString（）；
tabContents[newtabName]=“…”+newtabIdx.toString（）；
var container_buttons=document.getElementById（“container_buttons”）；
容器按钮.insertAdjacentHTML（'beforeend'，'tab'+newtabIdx.toString（）+''）；
tab（newtabIdx）；
}

表1
表2
表3
+

只需创建一个变量来存储选项卡的内容，并创建按钮来切换选项卡

单击按钮时，将选项卡的旧值存储到变量，然后显示所选选项卡的值

如果文档需要与其他用户共享，或者数据必须持续存在，则需要一个数据库。但是，如果只需要向当前用户显示文档，则可以使用localstorageapi

var tabContents={
表0:“”，
tab1:“第一个tab的内容”，
tab2:“第二个tab的内容”，
tab3:“第三个选项卡的内容”，
}
var lastTab=0；
//从本地存储加载
//如果（window.localStorage.tabContents！=未定义）tabContents=JSON.parse（window.localStorage.tabContents）；
功能选项卡（idx）{
var textarea=document.getElementById（'textarea'）；
//保存最后一个选项卡的值
var tabnameLast=“tab”+lastTab.toString（）；
tabContents[tabnameLast]=textarea.value；
lastTab=idx；
//显示新选项卡的值
var tabname=“tab”+idx.toString（）；
textarea.value=tabContents[tabname]；
//保存到本地存储
//window.localStorage.tabContents=JSON.stringify（tabContents）；
}
函数newtab（）{
//var newtabIdx=tabContents.length；
var newtabIdx=Object.keys（tabContents.length）；
var newtabName=“tab”+newtabIdx.toString（）；
tabContents[newtabName]=“…”+newtabIdx.toString（）；
var container_buttons=document.getElementById（“container_buttons”）；
容器按钮.insertAdjacentHTML（'beforeend'，'tab'+newtabIdx.toString（）+''）；
tab（newtabIdx）；
}

表1
表2
表3
+

谢谢。这需要我使用SQL是吗？我还没有真正了解SQL。谢谢您的帮助。如果您需要存储持久化数据，那么您需要数据库，但如果只是向用户显示，那么数据库就太麻烦了。不客气。MongoDB实际上是NoSQL。易于扩展和学习。谢谢。这需要我使用SQL是吗？我还没有真正了解SQL。谢谢您的帮助。如果您需要存储持久化数据，那么您需要数据库，但如果只是向用户显示，那么数据库就太麻烦了。不客气。MongoDB实际上是NoSQL。易于扩展和学习。谢谢你，但我已经能够做到这一点。我想知道我是否可以做一个“新标签”按钮，让它像那样工作。这样用户就可以在现有选项卡之外创建一个新选项卡。@Coolsugar answer已编辑以演示如何添加新选项卡按钮谢谢，但我已经能够做到这一点。我想知道我是否可以做一个“新标签”按钮，让它像那样工作。所以这样