在我的笔记应用程序中，我无法重定向到我已经访问过的同一个链接。我如何解决它？

Question

在我的笔记应用程序项目中，我正在通过Andrew J. Mead的 Udemy 课程The Modern JavaScript Bootcamp学习，有一个名为Notes App的项目。

在那个项目中，有一个功能，我可以单击链接打开它的编辑页面。 一切正常，但是在我打开编辑后。html （编辑页面）和 go 返回我的索引。html （主页），我无法再次打开相同的注释页面。 我认为这不是我的浏览器的问题，因为我已经在Microsoft Edge 、 Google Chrome和Opera GX中尝试过。 我在这里发送我的项目代码。

此外，我还以mega.io链接（文件大小为 200 mb）的形式发送了我的问题视频https://mega.nz/file/Ll0wDQ6T#pd18MwGGb23YgermGIT3Fbqgbqgbqgbq

编辑.html

<!DOCTYPE html>
<html>
<head>
  <title>Notes Edit</title>
</head>
<body>
  <a href="/index.html">Home</a>
  <input id="note-title" placeholder="Enter Note Title シ">
  <textarea id="note-body" placeholder="Enter Note Body シ"></textarea>
  <button id="remove-note">Remove Note</button>
  <script src="notes-functions.js"></script>
  <script src="notes-edit.js"></script>
</body>
</html>

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Notes App</title>
  </head>
  <body>
    <h1>Notes App</h1>
    <h2>Take notes and never forget</h2>
    <input id="search-text" type="text" placeholder="Filter notes" />
    <select id="filter-by">
      <option value="byEdited">Sort by last edited</option>
      <option value="byCreated">Sort by recently created</option>
      <option value="alphabetical">Sort alphabetically</option>
    </select>
    <div id="notes"></div>
    <button id="create-note">Create Note</button>
    <script src="uuidv4.js"></script>
    <script src="notes-functions.js"></script>
    <script src="notes-app.js"></script>
  </body>
</html>

notes-edit.js （用于编辑页面和网站未完成）

const titleElement = document.querySelector("#note-title");
const bodyElement = document.querySelector("#note-body");
const removeElement = document.querySelector("#remove-note");
const noteId = location.hash.substring(1);
let notes = getSavedNotes();
let note = notes.find(function (note) {
  return note.id === noteId;
});

if (note === undefined) {
  location.assign("/index.html");
}

titleElement.value = note.title;
bodyElement.value = note.body;

titleElement.addEventListener("input", function (e) {
  note.title = e.target.value;
  saveNotes(notes);
});

bodyElement.addEventListener("input", function (e) {
  note.body = e.target.value;
  saveNotes(notes);
});

removeElement.addEventListener("click", function (e) {
  removeNote(note.id);
  saveNotes(notes);
  location.assign("/index.html");
});

window.addEventListener('storage', function (e) {
  if (e.key === 'notes') {
    notes = JSON.parse(e.newValue)
  }
})

notes-app.js （用于 index.html 页面）

const notes = getSavedNotes();

const filters = {
  searchText: "",
};

renderNotes(notes, filters);

document.querySelector("#create-note").addEventListener("click", function (e) {
  const id = uuidv4();

  notes.push({
    id: id,
    title: "",
    body: "",
  });
  saveNotes(notes);
  location.assign(`/edit.html#${id}`);
});

document.querySelector("#search-text").addEventListener("input", function (e) {
  filters.searchText = e.target.value;
  renderNotes(notes, filters);
});

document.querySelector("#filter-by").addEventListener("change", function (e) {
  console.log(e.target.value);
});

notes-functions.js （用于 notes-app.js 和 notes-edit.js 中使用的函数）

// Read Existing Notes From localStorage
const getSavedNotes = function () {
  const notesJSON = localStorage.getItem("notes");

  if (notesJSON !== null) {
    return JSON.parse(notesJSON);
  } else {
    return [];
  }
};

// Save The Notes To localStorage
const saveNotes = function (notes) {
  localStorage.setItem("notes", JSON.stringify(notes));
};

// Remove a note
const removeNote = function (id) {
  const noteIndex = notes.findIndex(function (note) {
    return note.id === id;
  });

  if (noteIndex > -1) {
    notes.splice(noteIndex, 1);
  }
};

// Generate the DOM structure for a note
const generateNoteDOM = function (note) {
  const noteEl = document.createElement("div");
  const textEl = document.createElement("a");
  const button = document.createElement("button");

  // Config the remove note btn
  button.textContent = "❌";
  noteEl.appendChild(button);
  button.addEventListener("click", function () {
    removeNote(note.id);
    saveNotes(notes);
    renderNotes(notes, filters);
  });

  // Setup the note title text
  if (note.title.length > 0) {
    textEl.textContent = note.title;
  } else {
    textEl.setAttribute("href", `/edit.html#${note.id}`);
    textEl.textContent = "Unnamed Note";
  }

  noteEl.appendChild(textEl);

  return noteEl;
};

// Render (application) notes
const renderNotes = function (notes, filters) {
  const filteredNotes = notes.filter(function (note) {
    return note.title.toLowerCase().includes(filters.searchText.toLowerCase());
  });

  document.querySelector("#notes").innerHTML = "";

  filteredNotes.forEach(function (note) {
    const noteEl = generateNoteDOM(note);
    document.querySelector("#notes").appendChild(noteEl);
  });
};

任何答案将不胜感激
谢谢

Answer 1

如果长度为 0，您似乎只设置了href属性：

// Setup the note title text
if (note.title.length > 0) {
  textEl.textContent = note.title;
} else {
  textEl.setAttribute("href", `/edit.html#${note.id}`);
  textEl.textContent = "Unnamed Note";
}

所以你只需要设置href不管标题，然后它应该是一个可点击的链接：

// Setup the note title text
if (note.title.length > 0) {
  textEl.textContent = note.title;
} else {
  textEl.textContent = "Unnamed Note";
}

// set the note link
textEl.setAttribute("href", `/edit.html#${note.id}`);

在我的笔记应用程序中，我无法重定向到我已经访问过的同一个链接。我如何解决它？

问题描述

1 个解决方案

解决方案1
0 2022-01-10 06:06:55

在我的笔记应用程序中，我无法重定向到我已经访问过的同一个链接。 我如何解决它？

问题描述

1 个解决方案

解决方案1 0 2022-01-10 06:06:55

在我的笔记应用程序中，我无法重定向到我已经访问过的同一个链接。我如何解决它？

解决方案1
0 2022-01-10 06:06:55