如何用JS实现浏览器链接永久保存（无需后端，刷新不丢失）

要实现刷新页面后链接不消失，用浏览器自带的localStorage就够了——这是个免费的客户端存储工具，数据会存在用户的浏览器里，刷新、关闭浏览器都不会丢失，完全符合你不用后端的需求。

下面是具体的修改步骤和代码：

核心思路 #

localStorage只能存储字符串，所以我们把每个链接的地址和显示文本做成一个对象，再把所有链接放在数组里，转成JSON字符串存进去。页面加载时再把字符串转成数组，重新渲染到表格里。

修改后的完整JS代码 #

const form = document.querySelector("#createElForm");
const table = document.querySelector("table");

// 从localStorage获取已保存的链接
function getSavedLinks() {
  // 拿不到数据就返回空数组
  const savedData = localStorage.getItem("savedLinks");
  return savedData ? JSON.parse(savedData) : [];
}

// 把链接渲染到表格中
function renderLinks() {
  // 先清空表格，避免重复渲染旧数据
  table.innerHTML = "";
  const links = getSavedLinks();
  
  // 遍历每个链接，生成表格行
  links.forEach(link => {
    const newRow = document.createElement("tr");
    const newCell = document.createElement("td");
    const newLink = document.createElement("a");
    
    // 补全链接前缀，避免相对路径问题
    const fullHref = link.href.startsWith('http') ? link.href : `https://${link.href}`;
    newLink.href = fullHref;
    newLink.target = "_blank";
    newLink.style.color = "blue";
    newLink.textContent = link.text;
    
    newCell.appendChild(newLink);
    newRow.appendChild(newCell);
    table.appendChild(newRow);
  });
}

// 提交表单时保存新链接
form.addEventListener("submit", function (e) {
  e.preventDefault();

  const linkValue = document.querySelector("#linkInput").value;
  const textValue = document.querySelector("#textInput").value;
  
  // 获取已有的链接数组，添加新链接
  const links = getSavedLinks();
  links.push({ href: linkValue, text: textValue });
  
  // 把数组转成JSON字符串，存到localStorage
  localStorage.setItem("savedLinks", JSON.stringify(links));
  
  // 重新渲染表格，显示最新的链接列表
  renderLinks();
  
  form.reset();
});

// 页面加载完成后，自动渲染已保存的链接
window.addEventListener("load", renderLinks);

代码解释 #

1. getSavedLinks()：专门负责从浏览器取数据，第一次使用时localStorage是空的，就返回空数组。
2. renderLinks()：把所有保存的链接生成表格行，先清空表格是为了防止刷新时重复显示旧内容。另外加了补全链接前缀的逻辑，避免用户输入不带http的链接时跳转到错误地址。
3. 提交事件：现在不仅生成页面元素，还会把新链接加到数组里，存回localStorage，然后重新渲染表格。
4. 页面加载事件：打开页面时自动把之前保存的链接显示出来，不用用户手动操作。

注意事项 #

• 数据存在用户自己的浏览器中，换设备或清空浏览器缓存会丢失数据，这是纯客户端方案的正常限制。
• 如果需要删除链接的功能，可以再加个删除按钮，点击时从数组里删掉对应项，再重新存回localStorage即可。

内容的提问来源于stack exchange，提问作者Thomas