<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);    
		 
	 });
	 
	 
 })();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.