mik-laj · June 19, 2018 19:43
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Page Title</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 </head>
 <body>
    <div class="jumbotron">
        <div class="container">
            <h1 class="display-4">Example localStorage</h1>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h2>Cases</h2>
                <div class="list-group">
                    <a href="index.html?id=1" class="list-group-item list-group-item-action">Case #1</a>
                    <a href="index.html?id=2" class="list-group-item list-group-item-action">Case #2</a>
                    <a href="index.html?id=3" class="list-group-item list-group-item-action">Case #3</a>
                </div>
            </div>
            <div class="col-md-9">
               <form action="" data-save-form id="case-4874564474">
                    <h2>Form</h1>
                    <div class="form-group row">
                        <label for="inputEmail3" class="col-sm-2 col-form-label">Textarea</label>
                        <div class="col-sm-10">
                            <textarea  class="form-control" id="inputEmail3" name="content"></textarea>
                        </div>
                    </div>
                </form> 
            </div>
        </div>
    </div>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <script type="text/javascript">

        /// TEST PURPOSE
        (function() {
            const getParams = (query) => {
              if (!query) {
                return { };
              }

              return (/^[?#]/.test(query) ? query.slice(1) : query)
                .split('&')
                .reduce((params, param) => {
                  const [ key, value ] = param.split('=');
                  // eslint-disable-next-line no-param-reassign
                  params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                  return params;
                }, { });
            };
            var id = getParams(document.location.search).id || 50;
            document.querySelector('form').id = `case-${id}`;
        }) ();

        // END TEST PURPOSE
        function storageAvailable(type) {
            try {
                var storage = window[type],
                x = '__storage_test__';
                storage.setItem(x, x);
                storage.removeItem(x);
                return true;
            }catch(e) {
                return e instanceof DOMException && (
                    // everything except Firefox
                    e.code === 22 ||
                    // Firefox
                    e.code === 1014 ||
                    // test name field too, because code might not be present
                    // everything except Firefox
                    e.name === 'QuotaExceededError' ||
                    // Firefox
                    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
                    // acknowledge QuotaExceededError only if there's something already stored
                    storage.length !== 0;
            }
        }

        document.addEventListener("DOMContentLoaded", function(event) {
                if(!storageAvailable('localStorage')){
                    return;
                }
                var forms = Array.from(document.querySelectorAll('[data-save-form]'));
                forms.forEach((form) => {
                    var key = `form-${form.id}`;
                    var inputs = form.querySelectorAll('textarea, input');
                    console.log({form, key, inputs});
                    var saveFormData = () => {
                        console.log("saveFormData");
                        var formData = {};
                        inputs.forEach((input) => {
                            formData[input.name] = input.value;
                        });
                        localStorage.setItem(key, JSON.stringify(formData));
                    };

                    var loadFormData = () => {
                        var formData = JSON.parse(localStorage.getItem(key));
                        console.log(formData);
                        if(!formData){
                            return;
                        }
                        Object.entries(formData).forEach(([name, value]) => {
                            var el = form.querySelector(`[name=${name}]`);
                            if(el) {
                                el.value = value;
                            }
                            console.log({name, value});
                        });
                    };
                    loadFormData();
                    inputs.forEach(el => {
                        el.addEventListener('input', saveFormData);
                    });
                })
            });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Page Title</title>

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	</head>
	<body>
	<div class="jumbotron">
	<div class="container">
	<h1 class="display-4">Example localStorage</h1>
	</div>
	</div>
	<div class="container">
	<div class="row">
	<div class="col-md-3">
	<h2>Cases</h2>
	<div class="list-group">
	<a href="index.html?id=1" class="list-group-item list-group-item-action">Case #1</a>
	<a href="index.html?id=2" class="list-group-item list-group-item-action">Case #2</a>
	<a href="index.html?id=3" class="list-group-item list-group-item-action">Case #3</a>
	</div>
	</div>
	<div class="col-md-9">
	<form action="" data-save-form id="case-4874564474">
	<h2>Form</h1>
	<div class="form-group row">
	<label for="inputEmail3" class="col-sm-2 col-form-label">Textarea</label>
	<div class="col-sm-10">
	<textarea class="form-control" id="inputEmail3" name="content"></textarea>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>

	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

	<script type="text/javascript">

	/// TEST PURPOSE
	(function() {
	const getParams = (query) => {
	if (!query) {
	return { };
	}

	return (/^[?#]/.test(query) ? query.slice(1) : query)
	.split('&')
	.reduce((params, param) => {
	const [ key, value ] = param.split('=');
	// eslint-disable-next-line no-param-reassign
	params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
	return params;
	}, { });
	};
	var id = getParams(document.location.search).id \|\| 50;
	document.querySelector('form').id = `case-${id}`;
	}) ();

	// END TEST PURPOSE
	function storageAvailable(type) {
	try {
	var storage = window[type],
	x = '__storage_test__';
	storage.setItem(x, x);
	storage.removeItem(x);
	return true;
	}catch(e) {
	return e instanceof DOMException && (
	// everything except Firefox
	e.code === 22 \|\|
	// Firefox
	e.code === 1014 \|\|
	// test name field too, because code might not be present
	// everything except Firefox
	e.name === 'QuotaExceededError' \|\|
	// Firefox
	e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
	// acknowledge QuotaExceededError only if there's something already stored
	storage.length !== 0;
	}
	}

	document.addEventListener("DOMContentLoaded", function(event) {
	if(!storageAvailable('localStorage')){
	return;
	}
	var forms = Array.from(document.querySelectorAll('[data-save-form]'));
	forms.forEach((form) => {
	var key = `form-${form.id}`;
	var inputs = form.querySelectorAll('textarea, input');
	console.log({form, key, inputs});
	var saveFormData = () => {
	console.log("saveFormData");
	var formData = {};
	inputs.forEach((input) => {
	formData[input.name] = input.value;
	});
	localStorage.setItem(key, JSON.stringify(formData));
	};

	var loadFormData = () => {
	var formData = JSON.parse(localStorage.getItem(key));
	console.log(formData);
	if(!formData){
	return;
	}
	Object.entries(formData).forEach(([name, value]) => {
	var el = form.querySelector(`[name=${name}]`);
	if(el) {
	el.value = value;
	}
	console.log({name, value});
	});
	};
	loadFormData();
	inputs.forEach(el => {
	el.addEventListener('input', saveFormData);
	});
	})
	});
	</script>
	</body>
	</html>