One of the common usability problems surrounding dynamically altered JavaScript pages is that there is no standard way of bookmarking an instance of a page. For example, if a user pages through a list, do they have a way of sending a URL to friend that will take them directly to page 3 of that list? There are two approaches to solving this problem: anchor links and page refreshes.

The anchor link approach works like a normal link, but since it is an anchor the state of the page is preserved, and the URL bar is updated. So, if we have this URL when the page loads:

The user might then click a link on the page that fires off an Ajax request. The page doesn’t reload, but the URL is changed to:

I’m not a huge fan of this approach mainly because it is a hack. It does work, but it doesn’t feel like the proper solution. Confusion can also occur when actual anchor links are needed, or when there are multiple paramteres to set.

The second approach, as seen in Google Maps, is to have a link on the page that says “Bookmark this page.” When the user clicks the link, the page refreshes, and the URL becomes bookmarkable. I wanted to go ahead and share how we handle this approach. First, the URL is constructed so that anything after the word bookmark is treated as a parameter.

Given that format, the following function will parse the URL into an associative array.

function parseUrl() { 
    ret = new Array(); 
    url = window.location.toString(); 
    url = url.split('/bookmark/'); 
    if(url.length == 2) { 
        params = url[1].split('/'); 
        for(var i = 0; i < params.length; i+=2) { 
            if(params[i+1]) { 
                ret[params[i]] = params[i+1]; 
    return ret; 

parseUrl() just loops through the name value pairs in the URL, and places them in an array. If there is a name without a value, it will not be included, and if the word ‘bookmark’ is not found, the array will be empty. Given the array, we can now perform actions on load:

function init() {
    params = parseUrl();
    if(params['page']) jumpToPage(params['page]);

What is nice about this approach is that the URL can be easily guessed, and should someone guess wrong, the invalid parameters can just be ignored.

HTML Form Builder
Ryan Campbell

Bookmarking Dynamic Pages by Ryan Campbell

This entry was posted 4 years ago and was filed under Notebooks.
Comments are currently closed.


  1. Lim Chee Aun · 4 years ago

    Just a correction. On the 7th paragraph, it’s parseUrl(), not pasreUrl().

  2. marek · 4 years ago

    yes, thanks for this comment :) anf of course, article too…

  3. Ryan Campbell · 4 years ago

    Thanks for the heads up. Should be fixed now.

  4. Brodie Rao · 4 years ago

    So instead of allowing the user to bookmark the page, you’re saying they should first click a link that then allows them to bookmark it? I’m not quite seeing how that’s acceptable; you’re still breaking that functionality.

    You might also want to keep scope in mind in JavaScript. The variables declared in your functions are all global. Prefixing variable declarations with the var keyword will make them local.

  5. Kevin Hale · 4 years ago

    Hey Brodie, I think it’s more like a permalink feature in blogs. What it provides is a bookmarkable link. So they technically don’t have to click the link, then bookmark it—they could just bookmark the link. Obviously, some of the issues is in conveying that…but I think it seems to work fine in Google Maps and on blogs, so it isn’t a completely new concept.

  6. Ganeshji Marwaha · 4 years ago

    This might solve the bookmark problem although this has its own issue… But the common reason why “anchor links” are used is to enable “back button” functionality. That is very important from an usability perspective. Is there a cleaner solution for that, other than the “anchor link” technique.

  7. Mike · 4 years ago

    Nice. Submitted to tweako

  8. Maxim · 4 years ago

    What could be used, if you program in ASP.NET, is to hook up an HttpHandler and manage server side this Url. This could allow you to use this technology which is called Permalink. For different types of Permalink that is used, take a look at the article on Wikipedia

  9. Dmitry · 4 years ago

    Try this: as bookmarker and surfer.

  10. JR · 4 years ago

    I never understood why all that hype about “permalinks”… Look, a link is permanent, unless you don’t work with them properly. Therefore, we don’t need “permalinks” but to use links appropately; otherwise we are just duplicating functionality and confusing people (why should the link to a page be different to its permalink!?!”)

  11. Paul Walker · 3 years ago

    I disagree - the first method allows people to bookmark pages the way they’re used to doing it. - It may be a hack — but it works… (Its also simpler)

  12. 3gp videos · 3 years ago

    Hi! I think .htaccess is better