Question 160945 in Html Question posted in
Some basic documentation can be found here.

the page refreshes? Can I save links w/ JS in my browser so they persist when page refreshes?

I am working on a project that would allow the client to save a link to the webpage without having to do any backend coding. I have html and js written to allow this, but the js resets when you leave the page and the link goes away. How could I make these links permanent after addition even if the page is reloaded, etc.? FYI: I am a novice at coding, so dumbing down answers for me is appreciated.

Here is my html and js code:

<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();
});
Tags:

2

Answers


  1. 0

    You can save and retrieve data using localstorage

    So, to save data

    localStorage.setItem(linkValue, textValue);

    and to recieve data

    localStorage.getItem(linkValue);

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

    Login or Signup to reply.
  2. 0

    (excuse my english and speling)

    create a javascript object and pt that information in it,
    then save the object to your lacal storage, then upon page reload get the object and create the link

    // 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);
}

    this function creates the links and returns atable row (tr element) with the links

    // 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;
}

    if there is anything i need to clarify or if i misunderstood what you wanted to do please comment,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search