JSFiddle - React, Tailwind, and code Playground

by Krzysztof Jedraszewski

HTML

<body>
  <input type="text" id="txtField" name="url" value="">
  <button type="button" id="myBtn">set background</button>
</body>

CSS

body {
  background-repeat: no-repeat;
  background-size: cover;
}

JavaScript

const defaultIMG = "https://s-media-cache-ak0.pinimg.com/736x/88/50/2b/88502b58b2ca3509be47473044fde8cc.jpg", //set default image
  myButton = document.getElementById("myBtn"),
  myTxtField = document.getElementById("txtField");
let isStorage = false;


if (typeof(Storage) !== "undefined") { //check onload for Storage support
  isStorage = true;
  (localStorage.getItem("url") === null) ? localStorage.setItem("url", defaultIMG): false; //check if url Item exists in localStorage
  myTxtField.value = localStorage.getItem("url");
  document.body.style.backgroundImage = 'url(' + localStorage.getItem("url") + ')';
} else {
  // If Storage not supported try other method
}
if (isStorage) {
  myBtn.addEventListener("click", () => {
    localStorage.setItem("url", myTxtField.value);
    document.body.style.backgroundImage = 'url(' + localStorage.getItem("url") + ')';
  });
} else {
  // Storage not supported
};