我如何保存链接到文件或网站从我的html浏览器使用JS没有它被重置每一次

hfyxw5xn  于 2023-05-15  发布在  其他
关注(0)|答案(3)|浏览(112)

我正在做一个项目,将允许客户端保存到网页的链接,而无需做任何后端编码。我写了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();
});
i7uaboj4

i7uaboj41#

可以使用localstorage保存和检索数据
为了保存数据

localStorage.setItem(linkValue, textValue);

并接收数据

localStorage.getItem(linkValue);

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

ryevplcw

ryevplcw2#

使用localStorage属性的工作示例。

保存数据

关键是创建一个临时存储链接的变量。在这个例子中,我将变量命名为savedLinks
因为我们将链接表示为自定义的textValue。最好将链接的数据存储为Object数据类型,因为它允许我们使用textValue作为唯一的键标识符,这可以用来防止DOM上重复的链接名称。
变量savedLinks更新后,保存到localStorage
例如:localStorage.setItem("links")
我决定将savedLinks变量作为links存储在我的localStorage中,但您可以将其命名为最适合您的名称。我还决定使用自定义函数saveLink()更新和保存savedLinks数据,因为它允许我以后在重复时排除进一步的链接包含。

function saveLink(textValue, linkValue) {
  
  if (textValue in savedLinks)
  {
    // return false, with a popup message (alert)
    alert(`Link with textValue '${textValue}' already exists.`);
    return false;
  }

  // Include the link into the 'savedLinks' variable,
  // Then, save 'savedLinks' variable to the localStorage.
  savedLinks[textValue] = linkValue;
  localStorage.setItem("links", JSON.stringify(savedLinks));

  return true;
}

注意:

  • LocalStorage仅将键值对存储为字符串。
  • LocalStorage数据可以使用DevTools手动删除(部分:存储),并通过清除浏览器的缓存。
  • 此外,localStorage数据唯一地保存到特定浏览器。因此,保存在Chrome中的内容无法被Firefox访问。

导入保存的数据

一旦设置了localStorage变量,我们就可以使用命令localStorage.getItem("links")访问它。
我们可以在任何时候尝试检索localStorage数据,因为如果代码失败,它将返回null值。我们可以使用它将变量savedLinks声明为一个空Object,如下所示:
var savedLinks = JSON.parse(localStorage.getItem("links")) || {};
parse()将把保存在localStorage数据中的构造为JavaScript值或对象。如果没有它,我们将不得不处理字符串数据类型。
因为我们总是将savedLinks初始化为Object。我们可以简单地遍历可用的键并将链接导入DOM。

Object.keys(savedLinks).forEach(key => {
  let textValue = key;
  let linkValue = savedLinks[key];
  createLink(textValue, linkValue);
});

新增

我决定在createLink()函数中保护链接。这是因为当我试图访问导入到DOM的链接时,我被重定向到本地目录而不是指定的地址。但是,我这样做最重要的是因为包含TLS(传输层安全性)和SSL( ssl 层)提高了客户端的安全性。

工作示例

超文本标记语言

<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>
  
<table></table>

JS -函数

function createLink(textValue, linkValue) {
  // If TLS or SSL is NOT included in the link
  // Then, secure the link's connection with TLS protocol 
  if (!linkValue.includes('https://')) {
    if (!linkValue.includes('http://')) {
      linkValue = 'https://' + linkValue;
    }
  }

  // Construct the link and append it to the <table>

  let newRow  = document.createElement("tr");
  let newCell = document.createElement("td");
  let 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);
}

function saveLink(textValue, linkValue) {
  
  if (textValue in savedLinks)
  {
    // return false, with a popup message (alert)
    alert(`Link with textValue '${textValue}' already exists.`);
    return false;
  }

  // Include the link into the 'savedLinks' variable,
  // Then, save 'savedLinks' variable to the localStorage.
  savedLinks[textValue] = linkValue;
  localStorage.setItem("links", JSON.stringify(savedLinks));

  return true;
}

JS -主脚本

const form  = document.querySelector("#createElForm");
const table = document.querySelector("table");
// Get saved 'links' Object from the localStorage.
// Otherwise, set variable 'savedLinks' to an empty Object.
const savedLinks = JSON.parse(localStorage.getItem("links")) || {};

// Create any saved links to the DOM
Object.keys(savedLinks).forEach(key => {
  let textValue = key;
  let linkValue = savedLinks[key];
  createLink(textValue, linkValue);
});

form.addEventListener("submit", function(e) {
  e.preventDefault();

  let linkValue = document.querySelector("#linkInput").value;
  let textValue = document.querySelector("#textInput").value;

  // Try to save the link into the localStorage.
  // If the link is already saved, stop this script. 
  if (!saveLink(textValue, linkValue)) return;
  
  createLink(textValue, linkValue);
  form.reset();
});
s3fp2yjn

s3fp2yjn3#

(请原谅我的英语和拼写)
创建一个javascript对象,并在其中输入信息,然后将对象保存到本地存储,然后在页面重新加载时获取对象并创建链接

// create a function that saves the link info
function saveLinkInfo(href,target,color,textContent){
  
  // put the parametors in an object to make a link object
  const link = {href,target,color,textContent};

  // if you have links in your localstorage get them with the "localStorage.getItem("linkInfo")" method
  // use "JSON.parse()" to convert them into an object 
  //if you dont have any create an object, the below line does all that
  var linkInfo = JSON.parse(localStorage.getItem("linkInfo")) || {};

  // create a unique id for the new link
  // below i do this by geting an array of all the keys of values in the links info variable with the "Object.keys(linkInfo)" method
  // then i get the legth of the array and add 1, this will create a unique id like in sql auto encrement ids
  var linkId = Object.keys(linkInfo).length + 1;
  
  // add the link object to the linkInfo Object using the id we created as the key
  linkInfo[linkId] = link;

  // turn the linkinfo onject to a jason string
  // we are doing this becase you can only save strings to the loacal storage
  linkInfo = JSON.stringify(linkInfo);

  // save the linkinfo stringified object to your localstorage
  localStorage.setItem("linkInfo",linkInfo);
}

此函数创建链接并返回具有链接的表行(tr元素)

// create the links on page reload
function createLinks(){
  // get the linkInfo object and use "JSON.parse()" to turn it back into an object
  //  remember we turned it into a Json string before saving it in the "saveLinkInfo()" function
  const linkInfo = JSON.parse(localStorage.getItem("linkInfo")) || {};
  const newRow = document.createElement("tr");
  const newCell = document.createElement("td");

  // loop through the object and create the link
  for(let key in linkInfo){
    if(linkInfo.hasOwnProperty(key)){
      
      const newLink  = document.createElement("a");
      newLink.href = linkInfo[key].href;
      newLink.target = linkInfo[key].target;
      newLink.style.color = linkInfo[key].color;
      newLink.textContent = linkInfo[key].textContent;

      newCell.appendChild(newLink);
      newRow.appendChild(newCell);
    }
  }
  
  // return the row
  return newRow;
}

如果有什么我需要澄清或如果我误解了你想做什么请评论,

相关问题