WebApps with LocalStorage and AppCache/JSON

A JSON file on you local is a text file that follows the JSON syntax. The FileReader API provides a string as input. In the general this feature will be used to upload a file to remote server. E.g. a text file of an essay as home work to the teacher or Octave or Maxima script that you have created as response to a learning task. Now we load the file just into the browser environment and process the JSON.

Basic AppLSAC with Browser as Runtime Environment

Learning Task

  • (FileReader API) The following programming task addresses the basic skills in Vanilla Javascript to handle a JSON file. In a second step we assume that basic steps integrated in a library LoadFile4DOM[1] and will use the following steps by a library in more complex learning tasks.
    • create and index.html and add a script tag script tag and add your javscript code in between this tag.
    • use the FileReader API in a browser to load a JSON file into your browser (not to a remote server)
    • parse the JSON with JSON.parse(filedata) in Javascript in the onload handler of the load procedure (place the code into the script tag of your HTML file index.html.
    • (optional) use a try-catch environment to check if the loaded input string has not a valid JSON format.
    • for the basic example the JSON should be a simple object with the attributes name and town
    • add a HTML text input element in which the user can add a name (e.g. "Peter")
    • add an update button that reads the new name from the input box.
    • update the name-attribute in the loaded and parsed JSON with the new name of the input box (e.g, Peter)
    • after that operation the JSON in the browser should contain the value "Peter" in the name attribute of the JSON
    • add also a HTML textarea in your HTML page
    • (optional) create a javascript file handlejson.js and import this library in the HTML file with the script tag.
  • (Image Handling) The next task is to create an AppLSAC that converts color image into a grey scale image.
    • First of all look for existing Javascript libraries that can to that for your.
    • Load your Javascript image into a HTML canvas with a FileReader or with LoadFile4DOM.
    • Then apply the image conversion into grey scale on the canvas.
    • (optional) Learn how to save the converted grey scale image with FileSaver.js library by Eli Grey.

See also



  1. LoadFile4DOM Git Repository (2019) Git Repository for this learning resource - URL: https://www.gitlab.com/niehausbert/loadfile4dom (2021/10/05)