CODEWITHSUNDEEP
javascripthtmlcss
user14214236
user14214236

Reputation:

Is there a way to store whatever i append to DOM with js,in local storage in order to retrieve it after page reloads?

Ok,for testing purposes lets say i have a function where it appends <li> elements inside an <ol> container,and i want to keep all list items i've added,is there a way to store them in Local Storage (or any other way,locally) so i can retrieve them every time i reload the page ?

I've studied a little bit in Window.localStorage api,i did'nt find a method to store a dynamic element like that,but again if there is something i would'nt know to recognize the right practice to do it,since i'm still a student.Any ideas?

var textcounter = 1;
var inputcounter = 1;

function addText() {
var div = document.getElementById("div");
var texttobestored =document.createElement("li");
texttobestored.id = "text" + textcounter;
texttobestored.style.color="red";
texttobestored.innerHTML = "<p>I WANT TO KEEP THIS TEXT</p>";
div.appendChild(texttobestored);
textcounter++;
}
function addInputs() {
var div = document.getElementById("div");
var inputstobestored =document.createElement("li");
inputstobestored.id = "input" + inputcounter;
inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
inputstobestored.style.color = "blue";
inputstobestored.style.width = "600px";
div.appendChild(inputstobestored);
inputcounter++;
}
#div{
width:600px;
}
<html>
<body>
<ol id="div">
<button onclick="addText()" style="height:100px;width:100px">ADD TEXT</button>
<button onclick="addInputs()" style="height:100px;width:100px">ADD INPUTS</button>
</ol>
</body>
</html>

Upvotes: 0

Views: 105

Answers (1)

imvain2
imvain2

Reputation: 15847

Here is a working fiddle: https://jsfiddle.net/3ez4pq2d/

This function calls saveInput to save the data to localstorage. Then it also generates the inputs that are saved via loadInput.

This just stores the ID, COLOR and WIDTH. But using this as a base you can save additional fields also.

function saveinput(obj) {
  saved = localStorage.getItem("items") || "[]"
  saved = JSON.parse(saved)
  saved.push(obj)
  localStorage.setItem("items", JSON.stringify(saved))
}

var textcounter = 1;
var inputcounter = 1;

function addText() {
  var div = document.getElementById("div");
  var texttobestored = document.createElement("li");
  texttobestored.id = "text" + textcounter;
  texttobestored.style.color = "red";
  texttobestored.innerHTML = "<p>I WANT TO KEEP THIS TEXT</p>";
  div.appendChild(texttobestored);
  textcounter++;
}

function addInputs() {
  var div = document.getElementById("div");
  var inputstobestored = document.createElement("li");
  inputstobestored.id = "input" + inputcounter;
  inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
  inputstobestored.style.color = "blue";
  inputstobestored.style.width = "600px";

  saveinput({
    id: "input" + inputcounter,
    color: "blue",
    width: "600px"
  })

  div.appendChild(inputstobestored);
  inputcounter++;
}

function loadInput() {
  inputs = localStorage.getItem("items") || "[]"
  inputs = JSON.parse(inputs)

  inputs.forEach(function(input) {
    var div = document.getElementById("div");
    var inputstobestored = document.createElement("li");
    inputstobestored.id = input.id;
    inputstobestored.innerHTML = "<input placeholder = ContentsToBeSaved>";
    inputstobestored.style.color = input.color;
    inputstobestored.style.width = input.width;
    div.appendChild(inputstobestored);
    inputcounter++;
  })
}

loadInput();

Upvotes: 1

Related Questions