Onderin heb je een checkbox staan waarmee je ingevoerde gegevens kan opslaan. Zo iets wil ik voor de klanten gegevens gebruiken, dus voor de volgende keer hoeven de klanten minder in te voeren en bij het wegvinken zal alle gegevens verdwijnen.
Het probleem met cookies is en blijft dat ze bij de gebruiker op de pc worden opgeslagen. Kiest de gebruiker er voor om een andere pc, laptop, tablet of telefoon te gebruiken dan heeft hij deze gegevens wederom weer niet voor handen. Daarom blijft het het meest klantvriendelijk om de accountgegevens op te slaan in de database van de server inclusief een versleuteld wachtwoord. Een gebruikersnaam is niet eens verplicht want je kunt een klant ook laten inloggen met de combinatie email + wachtwoord. Aan de hand van die gegevens zijn de overige zo uit de database te plukken. Het enigste waar je eventueel een cookie voor zou kunnen gebruiken is om de gebruiker ingelogd te laten. Echter is dit minder veilig en bovendien bieden de meeste moderne browsers al aan om het wachtwoord op te slaan.
De klanten kunnen zich aanmelden en inloggen maar niet iedereen wilt dat doen dus daardoor wil ik een kleine anternatieve optie aanbieden, heb je misschien een tip of een voorbeeld om mij ergens door te verwijzen?
Als je de klantgegevens in een JSON stopt dan kun je alle gegevens in één keer opslaan.
De volgende keer lees je ze uit en stopt ze terug in het formulier. Enkel javascript.
Nee, met html5 localStorage ben ik niet bekend.
Ik heb wel een javascript de waarde van input opgeslagen wordt, maar hiervoor wil ik met checkbox mee werken dus aanvinken is opslaan en wegvinken is wissen en vervolgens druk op button om form te verwerken.
Eerste keer even formulier invullen, vinkje aanzetten en versturen.
Dan vernieuwen (F5) en de gegevens worden automatisch ingevuld.
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id='login' action='submit.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >Name:</label>
<input type='text' name='username' id='username' maxlength="50" required /><br>
<label for='email' >Email:</label>
<input type='email' name='email' id='email' maxlength="100" required /><br>
<label for='saveform' >Bewaar mijn gegevens</label>
<input type='checkbox' name='saveform' id='saveform' /><br>
<input type='submit' value='Verzenden' />
</form>
<script>
// welke velden wil je bewaren, noteer het id
var formFields = ['username','email'];
// bewaar de opgegeven velden in de localstorage
function localStorageSave() {
var values = [];
if (typeof(Storage) != "undefined") { // check browser support
for(var i = 0 ; i < formFields.length ; i++) // zet formfield values in een array
values.push($('#'+formFields[i]).val());
var json = JSON.stringify(values); // maak een json string
localStorage.setItem("formDetails", json); // sla de json string op
}
}
// haal de opgegeven velden op van de localstorage
function localStorageLoad() {
if (typeof(Storage) != "undefined") { // check browser support
var json = localStorage.getItem("formDetails"); // haal de json string op
var values = JSON.parse(json); // zet de JSON terug in een array
if(values) { // als de array geldig is
$('#saveform').prop('checked', true); // zet direct de checkbox weer aan
for(var i = 0 ; i < formFields.length ; i++) // voor elk formfield
$('#'+formFields[i]).val(values[i]); // set de formfield value
}
}
}
$( document ).ready(function() {
localStorageLoad(); // probeer formfields te laden
$( "#login" ).submit(function( event ) { // catch form on submit
if($('#saveform').prop('checked')) { // indien de checkbox aangevinkt is
localStorageSave(); // bewaar form fields
} else {
localStorage.removeItem("formDetails"); // anders opgeslagen gegevens wissen
}
return true; // submit form
});
});
</script>
</body>
</html>
