<p><button class="generate">Generate and Save Random ID</button></p>
<p>
<code></code>
</p>
<p><button class="remove" disabled>Remove Saved ID</button></p>
(function() {
const generateId = () => Math.random().toString(36).substr(2, 18);
const setUserClientId = async () => {
return localStorage.setItem("clientId",generateId())
}
const getUserClientId = () => {
return localStorage.getItem("clientId")
}
const cleanUserClientId = () => {
localStorage.removeItem("clientId");
}
document.addEventListener( "DOMContentLoaded", function() {
let button_generate = document.querySelector( "button.generate" ),
button_remove = document.querySelector( "button.remove" ),
output = document.querySelector( " code " ),
client_id = '';
if(getUserClientId()) {
output.innerHTML = getUserClientId() + ' ↗️ Load from Local Storage';
}
button_generate.addEventListener( "click", function() {
button_generate.disabled = true;
button_remove.disabled = false;
setUserClientId().then(() => {
output.innerHTML = getUserClientId() + ' ⬅️ Saved to Local Storage';
});
}, false);
button_remove.addEventListener( "click", function() {
button_generate.disabled = false;
button_remove.disabled = true;
cleanUserClientId();
output.innerHTML = '❌ Removed from Local Storage';
}, false);
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.