JSFiddle - React, Tailwind, and code Playground

by Anton Chukanov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.10/pako.min.js"></script>
<input id="a" />
<input id="b" />

CSS

input {
  width: 100%;
  margin-bottom: 10px;
  padding: 3px;
  box-sizing: border-box;
}

JavaScript

const urlParam = btoa(pako.deflate(JSON.stringify(getUser()), { to: 'string' }))
document.getElementById('a').value = urlParam;
// push the value into the URL

// read this value from the URL
const user = JSON.parse(pako.inflate(atob(urlParam), { to: 'string' }));
document.getElementById('b').value = user.name;

function getUser() {
  return {
    id: 1,
    name: 'TestUser',
    location: 'In the middle of nowhere',
    age: 26,
    t1: 1111111,
    t2: 1111111,
    t3: 1111111,
    t4: 1111111,
    t5: 1111111,
    t6: 1111111,
    t7: 1111111,
    t8: 1111111,
    t9: 1111111,
    t10: 1111111,
    t11: 1111111,
    t12: 1111111,
    t13: 1111111,
    t14: 1111111,
    t15: 1111111,
    t16: 1111111,
    t17: 1111111,
    t18: 1111111,
    t19: 1111111,
    t20: 1111111,
    t21: 1111111,
    t22: 1111111,
    t23: 1111111,
    t24: 1111111,
    t25: 1111111,
    t26: 1111111,
    t27: 1111111,
    t28: 1111111,
    t29: 1111111,
    t30: 111111,
  }
}