(jQueryを用いているが)「id="id"」の値が変わった場合に
表示中のURLに埋め込む方法。
┌──────────────────────────────────────┐
│$('#id').on('change', function() {                                          │
│    //----------------------------------------------------------------------│
│    //  (案1)リロードする場合                                               │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        location.href = location.href.replace(/\?.*$/, '');                 │
│    } else {                                                                │
│        location.href = location.href.replace(/\?.*$/, '')                  │
│                      + '?id=' + encodeURI($('#id').val());                 │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│    //  (案2)URLだけ書き換える場合                                          │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        history.pushState(null, null, location.pathname);                   │
│    } else {                                                                │
│        history.pushState(null, null, `?id=${encodeURI($('#id').val())}`);  │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│});                                                                         │
└──────────────────────────────────────┘
これで、値を変更した場合に、URLも変化するので
そのURLを用いることができる。