Modificar una cadena de consulta sin recargar la página

Estoy creando una galería de fotos y me gustaría poder cambiar la cadena de consulta y el título cuando se examinan las fotos.

El comportamiento que estoy buscando se ve a menudo con algunas implementaciones de página continua / infinita, donde mientras se desplaza hacia abajo, la cadena de consulta sigue aumentando el número de página ( http://x.com?page=4 ), etc. Esto debería ser simple en teoría, pero me gustaría algo que sea seguro en los principales navegadores.

Encontré esta gran publicación y estaba tratando de seguir el ejemplo de window.history.pushstate, pero eso no parece funcionar para mí. Y no estoy seguro de si es ideal porque realmente no me importa modificar el historial del navegador.

Solo quiero poder ofrecer la posibilidad de marcar la foto que se está viendo actualmente, sin tener que volver a cargar la página cada vez que se cambia la foto.

Aquí hay un ejemplo de página infinita que modifica la cadena de consulta: http://tumbledry.org/

UPDATE encontró este método:

window.location.href = window.location.href + '#abc';

parece funcionar para mí, pero estoy en un nuevo Chrome ... ¿probablemente causaría algunos problemas con los navegadores más antiguos?

Si está buscando una modificación de Hash, su solución funciona bien. Sin embargo, si desea cambiar la consulta, puede usar pushState, como dijo. Aquí hay un ejemplo que puede ayudarlo a implementarlo correctamente. Probé y funcionó bien:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

No recarga la página, pero solo le permite cambiar la consulta de URL. No podrá cambiar el protocolo o los valores de host. Y, por supuesto, requiere navegadores modernos que puedan procesar la API de historial de HTML5.

Para más información:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

A partir de la respuesta de Fabio, creé dos funciones que probablemente serán útiles para cualquiera que se encuentre con esta pregunta. Con estas dos funciones, puede llamar insertParam()con una clave y un valor como argumento. Agregará el parámetro de URL o, si ya existe un parámetro de consulta con la misma clave, cambiará ese parámetro al nuevo valor:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

He utilizado la siguiente biblioteca de JavaScript con gran éxito:

https://github.com/balupton/jquery-history

Es compatible con la API de historial de HTML5, así como con un método alternativo (usando #) para navegadores más antiguos.

Esta biblioteca es esencialmente un polyfill alrededor de `history.pushState '.

Quiero mejorar la respuesta de Fabio y crear una función que agregue una clave personalizada a la cadena de URL sin volver a cargar la página.

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

Entonces la API de historial es exactamente lo que está buscando. Si también desea admitir navegadores heredados, busque una biblioteca que se base en la manipulación de la etiqueta hash de la URL si el navegador no proporciona la API de historial.