Local Storage in Web Pages

TL;DR

User enters input in a web page, but the internet connection seems to be temporarily down at the time of sending changes to server.

Can we somehow store the entered changes locally, and save to server after the connection is up?

Short Summary:

• The first line of the TLDR summary above is also the premise of this this article. + The answer to the question posed in the TLDR is : Yes, possible to save locally.

• HTML5 provides a feature called localStorage which allows browser to store data

• localStorage is a 'key-value pair' storage, saved locally by browser.

• any txtKey,ObjSomevalue pair can be saved to localStorage

• using the same key, one can retreive the value later from local storage.

• the browser 'somehow' stores the localStorage object of each page + and retreives it when the page is loaded again

• localStorage of a page saved using one browser (say firefox) can not be seen in another browser(e.g. opera)

• localStorage of a page saved in one profile of firefox can not be seen in another profile of firefox.

• all browsers provide the navigator.Online feature to check if internet connection is availale or not

• With this info, we can now check and if we are online, save to server, otherwise temporarily cache to local server.

• The next time connection is up if there is data to be saved, send it to server.

• A related aspect to note is the caching of supporting files.

  • Browsers may skip caching CSS/js of certian files which cause problems later when internet is down.
  • To avoid this situation, one can force caching of such files providing a manifest text file
  • HTML5 allows specifying a manifest file as part of HTML header.
  • It is a plain text file with version nr and list of files +Versioning of the manifest ensures that supporting CSS and JS are refreshed when new versions of sw are released at the server.

Limitations:

• This The offline/localStorage technique is useful in smaller time duration to save entered data.
• Multiple transactions may cause interaction with each other at business layer level and also has deeper with state/data at server, which can only be determined in online mode.
• If the same record/data unit was edited by another user or by same user at another browser it may cause overrwrite order errors. (newer entered data may be overwritten byolder enterd data if it was submitted later.)

Getting Hands-on:

1. Using client side JS, check if we are connected to internet:

    How: ```if(navigator.onLine){/*we are online*/}
          else {/*we are offline*/}```

2. Design the web app to save content to server (via REST etc) only if we are online if not (i.e. offline), save content locally to ```localStorage``

3. Save data typed in by user at HTML5 localStorage while offline.

    How: storing ```localStorage.setItem("keyName",objectContainigState;```
   
    retreiving ```objectContainingState = localStorage.getItem("keyName");```

4. Caching files can be misleading over long term because some files get updated during new releases. The Manifest file thus contains a version nr. More info about how changes are registered via versioning Also information on web server side e.g. Tomcat how to indicate manifest file in .htaccess

5. Tell browser side to cache certian files

    How:  proiding a text file manifest of relevant files.

Further Reading:

There many articles on this, not all are well written.

1. This one seems clean and useful. The example used is too much contrivedand not real-life, the explanation is clear and direct. https://developer.ibm.com/tutorials/x-html5mobile3/ (opens in a new tab)

2. tbc...