I'm working on saving textarea value on browser refresh. When there's a change to textarea by keyboard events, the value gets stored in local storage. However, When the textarea value gets changed indirectly...like button clicks, the value doesn't get saved. That's the problem, So, I changed my event handler from onkeyup to onchange. Still, This remains a problem. Do anyone have a better idea for this. Here's the code -

<textarea id="thetext"  value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved." onchange="saveValue(this);"></textarea><br/><br/>
<button id="thebutton" onclick="change()">Change</button>
<script>
    document.getElementById("thetext").value = getSavedValue("thetext");

    function saveValue(e){

        var id = e.id;  
        var val = e.value;  
        localStorage.setItem(id, val);

    }

    function getSavedValue (v) {

        if (!localStorage.getItem(v)) {
            return "";
        }

        return localStorage.getItem(v);

    };

    function change() {

        document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."

    }
</script>
<style>
textarea{height:100px;width:100%}
</style>

Edit - Above code is working well on my environment.

CodePudding user response：

you can do in easy way

function change() {
  let newValue = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
  
  var event = new Event('input');
  thetext.dispatchEvent(event);

  // or 
  // document.getElementById("thetext").value = newValue;
  // localStorage.setItem("thetext", newValue );
  
}

or complex usinng Object.defineProperty

thetext = document.getElementById("thetext")
thetext.value = getSavedValue("thetext");

function saveValue(e) {
  console.log(e)
  var id = e.id;
  var val = e.value;
  localStorage.setItem(id, val);
}

function getSavedValue(v) {
  return localStorage.getItem(v) || "";
}

function change() {
  document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
}

function monitorValue(element, property) {
  let descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), property);
  Object.defineProperty(element, property, {
    get: function() {
      return descriptor.get.apply(this, arguments);
    },
    set: function() {
      descriptor.set.apply(this, arguments);
      // create and dispatch input event
      var event = new Event('input');
      element.dispatchEvent(event);
      return this.value;
    }
  });
}

monitorValue(thetext, "value")

<style>textarea{height:80vh;width:100%}</style>
<textarea id="thetext"  
value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved." 
oninput="saveValue(this);
"></textarea><br/><br/>

<button id="thebutton" onclick="change()">Change</button>

CodePudding user response：

So what you want is that, the <textarea> value be stored in the localStorage every time it's changed.

I'd prefer defining a setter property on the textarea.

var ta = document.getElementById('thetext');

Object.defineProperty(ta, 'savedValue' , {
    set: (value)=> {
        ta.savedValue = ta.value = value;
        localStorage.setItem(ta.id, value);
    }
};

thebutton.addEventListener('click', (evt)=> {
    ta.savedValue = 'my sample click value';
});

ta.addEventListener('change', (evt)=> {
    ta.savedValue = evt.target.value;
};