Question

Is there some technique I can use (perhaps something clever with replaceState()) to update the history state object rather than replace it?

Given an existing state object that looks like this:

{ prop1:someValue, prop2:someOtherValue }

I want to be able to call something that will modify prop1 but leave prop2 alone.

I guess I’m really looking for a modifyState() rather than replaceState().

This would be trivial if I knew what the value of prop2 was, but I don’t. Firefox allows you to read history.state directly, so I could find the value out on Firefox and go with replaceState(). However that won’t work for Chrome, Safari, et al. because (as far as I can tell) they don’t allow direct access to history.state.

Is there some way for me to modify the state object as described above?

Answer 1

History.js allows for state manipulation via replaceState since Chrome 8.

I currently have a similar issue where only a part of the state needs to be modified. This is accomplished by cloning the current state data, changing the value and then calling replaceState.

History.replaceState(newState, null, oldState.url);