Javascript 如何在单击时创建新页面并将每个新页面内容保存到本地存储？

威尔，我正在创建一个博客页面。我正在使用

contenteditable

和

localstorage

因此，假设我有一个名为

Blog.html

<button>New post</button>
<div>
<a href=""></a>
 <div>

<button onClick="PublishPage()">Publish</button>


<div id="editor1" contenteditable="true"  class="editable" ></div>

<div id="editor1">

//Everything will be loaded here
</div>

当点击

发布按钮时

会将

内容可编辑

中的所有内容保存到

本地存储

JavaScript代码

function PublishPage(){

const editables = document.querySelectorAll("[contenteditable]");

// save edits
editables.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
  })
});

}

所有内容都将保存并加载到

View.html

<button>New post</button>
<div>
<a href=""></a>
 <div>

<button onClick="PublishPage()">Publish</button>


<div id="editor1" contenteditable="true"  class="editable" ></div>

<div id="editor1">

//Everything will be loaded here
</div>

在这之前一切都很顺利

现在我想要的是，单击

publish按钮后，
view.html
的链接将出现在
Blog.html
页面中。如果我点击了
New post按钮
，它会给我一个新的
post.html
页面，我可以在其中创建一篇比上一篇文章更多的文章并发布它，它应该被保存并加载到新的
view.html
页面，并且新的
view.html
页面的链接应该出现在
Blog.html
页面

我的想法是，我想创建多个帖子，并能够查看这些帖子

有没有一种方法可以通过
localstorage
实现这一点，而无需使用
数据库
或
php和ajax