Using Browser Local Storage to Refresh Information in Business Applications

John Bialous February 12, 2015

In this post, Chris Camac, Software Developer at Miles Technologies, discusses a method for leveraging browser local storage to improve accuracy in business web applications.

When developing business applications using the web, you have to contend with the reality that users will have multiple open pages. Your users will expect that as they go back to older pages, the information there is still accurate. So how can a program provide this functionality? One way is by making use of browser local storage.

On the client machine, the browser has its own storage that can be accessed via Javascript. You can cause your page to write to the local storage, and you can tell you page to listen for changes that might occur in that storage. When a change occurs on one page, that change will be heard on another page, and your client code can take action.

Are Users Seeing Outdated Notifications on Open Pages?

Let’s say that your program shows new notifications in its header area. A typical notification could be a count of how many new messages are waiting for the user. Every time a new page is opened, that count is retrieved from your data source and displayed. But the older pages that were opened already have a count.

Let’s imagine that your user clicks on the message count and is taken to a new page where the messages are displayed. Since the messages are not new anymore, the count of new messages on this page would correctly be zero; however, now your old pages display the wrong count. Later on, your user goes back to the older page, sees the count of new messages, and goes looking for the new messages.

What if We Want All Pages To Have the Most Recent Count of New Messages?

Here is an implementation that allows us to achieve that:

First, every page would contain some Javascript that sets the local storage to contain the current count of new messages using the following code:

window.localStorage.setItem(‘newMessageCount’, actualCount);

The setItem function uses a key / value pair.  The first parameter is the key ‘newMessageCount’.  The second parameter is the actual value of that count.

Then, the page would contain more Javascript that adds an event listener along with a function to execute if a change is detected:

The Event Listener says that if any part of the local storage gets set to a different value than it already contained, then call the delegate function ‘storageChange’.  From within the storageChange function, it is being verified that the key that triggered the event is the ‘newMessageCount’. Now your code can take action to change the count displayed on that page by using the event.newValue,  which would contain the most updated count.

Now That We Have the Code in Place, Let’s Run through the Example Again

Your user goes to the program’s landing page, and the count of new messages is retrieved from your data source and displayed. The count is now also set in the local storage, and your page is listening for that count to have changed.

The user clicks on the message count and is taken to a new page where the messages are displayed.  Since the messages are not new anymore, the count of new messages on this page would be zero, and your page sets the local storage to zero.  Now the listener on the older page(s) is triggered, and it sees that your count has changed.  It updates the count on the older pages, and viola: your information is up to date, even on pages that were opened hours ago.

Staying Local

One of the most interesting parts of using browser local storage is that everything is happening on the client side.  All the pages getting updated are being updated by the user’s local machine, so no exchange of information is happening via the server or web.

When a user loads a new page, the page gets the content from the server as it always does, but if that information is newer than the other pages already loaded, your machine actually is the one recognizing this and taking action to update the old pages.

What are some other challenges your users face with your business applications? Let us know in the comments, and we’ll get back to you with some suggestions and recommendations.

If you have any further questions about custom business applications, don’t hesitate to Contact us today.

Leave Us a Comment

Your email address will not be published. Required fields are marked *

Do great things.

Get Started