The implementation of the local storage inspector can be found in the localstorage.go source file in the client/localstoragedemo directory.

In the import groupings we include the js and dom packages (shown in bold):

package localstoragedemo

import (
  "github.com/gopherjs/gopherjs/js"
  "honnef.co/go/js/dom"
)

We've defined the localStorage variable and we've assigned it the value of the localStorage object that is attached to the window object:

var localStorage = js.Global.Get("localStorage")

As usual, we've aliased the Document object with the D variable to save us some typing:

var D = dom.GetWindow().Document().(dom.HTMLDocument)

The InitializePage function is responsible for setting up the event listeners for the Save and Clear All buttons:

func InitializePage() {
 saveButton := D.GetElementByID("saveButton").(*dom.HTMLButtonElement)
 saveButton.AddEventListener("click", false, func(event dom.Event) {
 Save()
 })

 clearAllButton := D.GetElementByID("clearAllButton").(*dom.HTMLButtonElement)
 clearAllButton.AddEventListener("click", false, func(event dom.Event) {
 ClearAll()
 })

 DisplayStorageContents()
}

We fetch the saveButton element by calling the GetElementByID method of the Document object and providing the id, "saveButton", as the sole input parameter to the method. Right below this, we add an event listener on the click event to call the Save function. Calling the Save function will save a new key-value pair entry.

We also fetch the clearAllButton element by calling the GetElementByID method of the Document object and providing the id, "clearAllButton", as the sole input parameter to the method. Right below this, we add an event listener on the click event to call the ClearAll function. Calling the ClearAll function will clear all key-value pairs that are currently stored in local storage.

The Save function is responsible for saving the key-value pair into the web browser's local storage:

func Save() {

  itemKey := D.GetElementByID("itemKey").(*dom.HTMLInputElement)
  itemValue := D.GetElementByID("itemValue").(*dom.HTMLInputElement)

  if itemKey.Value == "" {
    return
  }

  SetKeyValuePair(itemKey.Value, itemValue.Value)
  itemKey.Value = ""
  itemValue.Value = ""
  DisplayStorageContents()
}

We get the text input fields for the key and the value (shown in bold) using the GetElementByID method of the Document object. In the if conditional block, we check to see if the user has not entered a value for the Key input text field. If they have not entered a value, we return from the function.

If the user has entered a value into the Key input text field, we continue forward. We call the SetKeyValuePair function and provide the values for itemKey and itemValue as input parameters to the function. 

We then set the Value property of both itemKey and itemValue to an empty string, to clear the input text field, so that the user can easily add new entries later without having to manually clear the text in these fields.

Finally we call the DisplayStorageContents function, which is responsible for displaying all the current entries in local storage.

Let's take a look at the SetKeyValuePair function:

func SetKeyValuePair(itemKey string, itemValue string) {
  localStorage.Call("setItem", itemKey, itemValue)
}

Inside this function, we simply call the setItem method of the localStorage object, passing in the itemKey and itemValue as input parameters to the function. At this point, the key-value pair entry will be saved to the web browser's local storage.

The DisplayStorageContents function is responsible for displaying all the key-value pairs that are in local storage inside the itemList element, which is a dl (description list) element:

func DisplayStorageContents() {

  itemList := D.GetElementByID("itemList")
  itemList.SetInnerHTML("")

  for i := 0; i < localStorage.Length(); i++ {

    itemKey := localStorage.Call("key", i)
    itemValue := localStorage.Call("getItem", itemKey)

    dtElement := D.CreateElement("dt")
    dtElement.SetInnerHTML(itemKey.String())

    ddElement := D.CreateElement("dd")
    ddElement.SetInnerHTML(itemValue.String())

    itemList.AppendChild(dtElement)
    itemList.AppendChild(ddElement)
  }

}

We call the SetInnerHTML method with an input value of empty string to clear the contents of the list.

We iterate through all the entries in local storage using a for loop. For each key-value pair present, we get itemKey and itemValue by calling the localStorage object's key and getItem methods, respectively.

We use a dt element (dtElement) to display the key. A dt element is used to define a term in a description list. We use a dd element (ddElement) to display the value. A dd element is used to describe a term in a description list. Using the description list and its associated elements to display key-value pairs, we are using a semantic friendly approach to displaying the key-value pairs on the web page. We append the dt and dd elements to the itemList object by calling its AppendChild method.

The ClearAll function is used to remove all the key-value pairs that have been saved in local storage:

func ClearAll() {
  localStorage.Call("clear")
  DisplayStorageContents()
}

We call the clear method of the localStorage object, and then make a call to the DisplayStorageContents function. If everything is working properly, all the items should be cleared, and we should see no values appear in the itemList element once the Clear All button has been clicked.