[GopherJS] Setting Implementation via JSON and Web Storage (localStorage)
Implement setting feature to save user preferences in web application via JSON, Web Storage, and GopherJS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GopherJS implement setting via JSON and Web Storage (localStorage)</title>
</head>
<body>
<input type="checkbox" checked="checked" id="en"/><span>English</span><br>
<input type="checkbox" checked="checked" id="ja"/><span>Japanese</span><br>
<br>
<span>Order:</span>
<select id="order">
<option value="eng" selected="selected">English First</option>
<option value="jpa">Japanese First</option>
</select>
<script src="app.js"></script>
</body>
</html>
|
FIXME: There is bug in the code below. The json.Marshal cannot convert Setting type correctly. Still try to figure out what's going wrong.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | package main
import (
"encoding/json"
"github.com/gopherjs/gopherjs/js"
)
var localStorage = js.Global.Get("localStorage")
var mySettingName = "mySetting"
type Setting struct {
en bool `json:"en"`
ja bool `json:"ja"`
order string `json:"order"`
}
func Setting2JSON(s Setting) string {
b, err := json.Marshal(s)
if err != nil {
panic(err)
}
return string(b)
}
func JSON2Setting(j string) Setting {
setting := Setting{}
err := json.Unmarshal([]byte(j), &setting)
if err != nil {
panic(err)
}
return setting
}
func SaveSetting(s Setting) {
localStorage.Set(mySettingName, Setting2JSON(s))
}
func LoadSetting() Setting {
return JSON2Setting(localStorage.Get(mySettingName).String())
}
func SetupSetting() {
d := js.Global.Get("document")
enElm := d.Call("getElementById", "en")
jaElm := d.Call("getElementById", "ja")
orderElm := d.Call("getElementById", "order")
s := Setting{}
// check if there is saved setting in user browser
if localStorage.Get(mySettingName) == js.Undefined {
// no setting saved, use default setting
s.en = enElm.Get("checked").Bool()
s.ja = jaElm.Get("checked").Bool()
s.order = orderElm.Get("options").Call("item", orderElm.Get("selectedIndex").Int()).Get("value").String()
SaveSetting(s)
} else {
// use saved setting in user browser
s = LoadSetting()
enElm.Set("checked", s.en)
jaElm.Set("checked", s.ja)
orderElm.Set("value", s.order)
}
enElm.Call("addEventListener", "click", func(event *js.Object) {
s.en = enElm.Get("checked").Bool()
SaveSetting(s)
})
jaElm.Call("addEventListener", "click", func(event *js.Object) {
s.ja = jaElm.Get("checked").Bool()
SaveSetting(s)
})
orderElm.Call("addEventListener", "change", func(event *js.Object) {
s.order = orderElm.Get("options").Call("item", orderElm.Get("selectedIndex").Int()).Get("value").String()
SaveSetting(s)
})
}
func main() {
SetupSetting()
}
|
To see demo: use GopherJS to compile app.go to app.js. Put index.html and app.js in the same directory. Open index.html with your browser.
To implement setting feature via JavaScript, see [3].
Tested on:
- Ubuntu Linux 16.10
- Go 1.7.4
- Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
References:
[1] | GopherJS - A compiler from Go to JavaScript
(GitHub,
GopherJS Playground,
![]() |
[2] | pali/setting.go at master · siongui/pali · GitHub pali/json.go at master · siongui/pali · GitHub |
[3] | [JavaScript] Setting Implementation via JSON and Web Storage (localStorage) |