我正在做一个项目,将允许客户端保存到网页的链接,而无需做任何后端编码。我写了html和js来允许这一点,但是当你离开页面时,js会重置,链接也会消失。我如何才能使这些链接永久添加后,即使网页重新加载,等等?仅供参考:我是一个新手在编码,所以哑巴下来的答案对我来说是赞赏。
以下是我的HTML和JS代码:
<form action="#" id="createElForm">
<label for="" style="display: block;">Write or paste a link</label>
<input type="text" placeholder="www.example.com" id="linkInput" required>
<label for="" style="display: block;">Text to display</label>
<input type="text" placeholder="Example Text" id="textInput" required>
<br>
<br>
<button type="submit" style="display: block;">Submit</button>
</form>
const form = document.querySelector("#createElForm");
const table = document.querySelector("table");
form.addEventListener("submit", function (e) {
e.preventDefault();
const linkValue = document.querySelector("#linkInput").value;
const textValue = document.querySelector("#textInput").value;
const newRow = document.createElement("tr");
const newCell = document.createElement("td");
const newLink = document.createElement("a");
newLink.href = linkValue;
newLink.target = "_blank";
newLink.style.color = "blue";
newLink.textContent = textValue;
newCell.appendChild(newLink);
newRow.appendChild(newCell);
table.appendChild(newRow);
form.reset();
});
3条答案
按热度按时间i7uaboj41#
可以使用localstorage保存和检索数据
为了保存数据
并接收数据
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
ryevplcw2#
使用localStorage属性的工作示例。
保存数据
关键是创建一个临时存储链接的变量。在这个例子中,我将变量命名为
savedLinks
。因为我们将链接表示为自定义的
textValue
。最好将链接的数据存储为Object数据类型,因为它允许我们使用textValue
作为唯一的键标识符,这可以用来防止DOM上重复的链接名称。变量
savedLinks
更新后,保存到localStorage。例如:
localStorage.setItem("links")
。我决定将
savedLinks
变量作为links
存储在我的localStorage中,但您可以将其命名为最适合您的名称。我还决定使用自定义函数saveLink()
更新和保存savedLinks
数据,因为它允许我以后在重复时排除进一步的链接包含。注意:
导入保存的数据
一旦设置了localStorage变量,我们就可以使用命令
localStorage.getItem("links")
访问它。我们可以在任何时候尝试检索localStorage数据,因为如果代码失败,它将返回
null
值。我们可以使用它将变量savedLinks
声明为一个空Object,如下所示:var savedLinks = JSON.parse(localStorage.getItem("links")) || {};
parse()将把保存在localStorage数据中的构造为JavaScript值或对象。如果没有它,我们将不得不处理字符串数据类型。
因为我们总是将
savedLinks
初始化为Object。我们可以简单地遍历可用的键并将链接导入DOM。新增
我决定在
createLink()
函数中保护链接。这是因为当我试图访问导入到DOM的链接时,我被重定向到本地目录而不是指定的地址。但是,我这样做最重要的是因为包含TLS(传输层安全性)和SSL( ssl 层)提高了客户端的安全性。工作示例
超文本标记语言
JS -函数
JS -主脚本
s3fp2yjn3#
(请原谅我的英语和拼写)
创建一个javascript对象,并在其中输入信息,然后将对象保存到本地存储,然后在页面重新加载时获取对象并创建链接
此函数创建链接并返回具有链接的表行(tr元素)
如果有什么我需要澄清或如果我误解了你想做什么请评论,