How to save input of html textarea after refreshing the page?-CodePudding

I currently use following code to save input after browser refresh.

function saveValue(e){
            var id = e.id;  
            var val = e.value;  
            localStorage.setItem(id, val);
        }
       function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return &quot;&quot;;
            }
            return localStorage.getItem(v);
        }

onkeyup function, the data gets stored in local storage. However, if I test this with functions like replace, concat, etc. For example like this,

input.value = input.value.replace()
input.value = input.value.concat()

Only the input value which I 'entered' earlier is getting stored on local storage because of onkeyup event, and not the replaced or concatted value. Is there any event listener to capture modified values, or any other function which coukd help in this example?

CodePudding user response：

You can just call the saveValue() method after you´ve done all your stuff you need with the input.

CodePudding user response：

just update the saved value by calling the savevalue() method you defined like this input.value = input.value.replace(); input.saveValue()

CodePudding user response：

Run this in your own environment.

<form>
    <input name="first" placeholder="first" />
    <input name="last" placeholder="last" />
</form>

<script>
    const form = document.querySelector('form');
    const FORM_DATA = 'FORM-DATA';

    window.addEventListener('DOMContentLoaded', () => {
        const fromStorage = localStorage.getItem(FORM_DATA);
        if (!fromStorage) return;

        const json = JSON.parse(fromStorage);

        for (const input of form.querySelectorAll('input')) {
            input.value = json[input.name];
        }
    });

    form.addEventListener('keyup', () => {
        const formData = Object.fromEntries([...new FormData(form)]);
        localStorage.setItem(FORM_DATA, JSON.stringify(formData));
    });
</script>

CodePudding user response：

Here is an example that works :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save input after refreshing</title>
</head>
<body>
    <input id="myInput" type="text" />

    <script>
        function saveValue(inputElement) {
                if (!inputElement) throw new Error('inputElement param is required');

                const { id, value } = inputElement;

                if (!id) throw new Error('inputElemend should have an id attribute');

                localStorage.setItem(id, value);
            }

        function getSavedValue(inputElement) {
            if (!inputElement) throw new Error('inputElement param is required');

            const { id } = inputElement;

            if (!id) throw new Error('inputElemend should have an id attribute');

            const value = localStorage.getItem(id);

            return value;
        }

        const input = document.querySelector('#myInput');

        input.addEventListener("keyup", function(event) {
            saveValue(event.target)
        });

        window.addEventListener('load', function() {
            const value = getSavedValue(input);
            input.value = value;
        })
    </script>
</body>
</html>