How to Store Data After Refreshing the Web Page

Keep data after page refresh

You can store it in HTML5 Web storage, just include below code in your JS code

if (typeof(Storage) !== "undefined") {
localStorage.setItem("convertedTime", converted);
} else {
// Sorry! No Web Storage support
}

And whenever you want to fetch those stored data, you can get it just as below

var convertedTime=localStorage.getItem("convertedTime");

And then you can use it anywhere you want after reloading the page.

How to save user inputs after refreshing the page using local storage

You have many "comprehension" mistakes in your code. I commented them one by one.

// This array should be declared inside the addText function.
// Else, everytimes the user saves, the array will grow...
// And it will end in more data than the amount of inputs.
let time = [];
const addText = (ev) => {
  let newTime = {

    // Here, the targetted elements are divs. There is no value to a div.
    timeData: document.querySelectorAll("#hour Block, #hourBlock1, #hourBlock2").value,

    // Here, you will get a value... 
    // But always the value of the first .text-input of the page.
    textData: document.querySelector('.text-input').value
  }
  time.push(newTime);
  localStorage.setItem('My Time', JSON.stringify(time));
}

// The event handler is setted only for the first button.
document.querySelector('.saveButton').addEventListener('click', addText);

// The first .text-input value will be setted to "null"
// Because there is no "addText" item in localStorage.
// You saved under the item named "My time".
document.querySelector('.text-input').value = localStorage.getItem('addText');

So here is a working code. Have a close look at the differences.

const addText = (ev) => {
  let time = [];

  let fields = document.querySelectorAll(
    "#hourblock, #hourBlock1, #hourBlock2"
  );
  fields.forEach(function (element) {
    time.push({
      field: element.id,
      text: element.querySelector(".text-input").value
    });
  });
  console.log(time);
  localStorage.setItem("timeData", JSON.stringify(time));
};

document.querySelectorAll(".saveButton").forEach(function (btn) {
  btn.addEventListener("click", addText);
});

// on page load
let stored = JSON.parse(localStorage.getItem("timeData"));
if (stored) {
  console.log(stored);
  stored.forEach(function (item) {
    document
      .querySelector("#" + item.field)
      .querySelector(".text-input").value = item.text;
  });
}

This is working in CodePen.

How to persist user data after refreshing the page?

You can use localStorage of HTML5

http://www.w3schools.com/html/html5_webstorage.asp

Is there a way to store data after refresh

An alternative to using localStorage and SessionStorage is the Cache API.

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api#retrieving_from_a_cache

While the user can delete from the cache they can't modify data stored in it.

how to save state of the page when refreshing? (HTML, JS)

You either need to set up a back end to send data to and save the information you want to keep stored, or save data in localStorage.

Just know it is not the best practice to save sensitive info in localStorage (as they can be compromised in cross-site scripting attacks).

localStorage.setItem puts a bit of data into localStorage (and that stays there till you clear it) and localStorage.getData extracts it.

This might help get you started on localStorage, but you will have to figure out the function to set the colour to the element you have.

let boxColour = localStorage.getItem("boxColour");

if (boxColour === null) {
  setBoxColour("colour");
} else {
  setBoxColour(boxColour);
}

function setBoxColour(colour){ localStorage.setItem("colour");}

/* Inside the function you have to get the item and change it's style attribute or add a class to add styles */

Careful with that localStorage data!

---

Related Topics