[JavaScript] Setting Implementation via JSON and Web Storage (localStorage)


Implement setting feature to save user preferences in web application via JSON, Web Storage (localStorage), and JavaScript.

Demo

Source Code:

index.html | repository | view raw
 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>JavaScript 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>
app.js | repository | view raw
 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
"use strict";

function SaveSetting(s) {
  localStorage.mySetting = JSON.stringify(s);
}

function LoadSetting() {
  return JSON.parse(localStorage.mySetting);
}

function SetupSetting() {
  var enElm = document.getElementById("en");
  var jaElm = document.getElementById("ja");
  var orderElm = document.getElementById("order");

  var setting = {
    en: true,
    ja: true,
    order: "eng",
  };

  // check if there is saved setting in user browser
  if (typeof localStorage.mySetting === 'undefined') {
    setting.en = enElm.checked;
    setting.ja = jaElm.checked;
    setting.order = orderElm.options[orderElm.selectedIndex].value;
  } else {
    setting = LoadSetting();
    enElm.checked = setting.en;
    jaElm.checked = setting.ja;
    orderElm.value = setting.order;
  }

  enElm.addEventListener("click", function(e) {
    setting.en = enElm.checked;
    SaveSetting(setting);
  });

  jaElm.addEventListener("click", function(e) {
    setting.ja = jaElm.checked;
    SaveSetting(setting);
  });

  orderElm.addEventListener("change", function(e) {
    setting.order = orderElm.options[orderElm.selectedIndex].value;
    SaveSetting(setting);
  });
}

SetupSetting();

To implement setting feature via GopherJS, see [2].


Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

References:

[1]

pali/setting.go at master · siongui/pali · GitHub

pali/json.go at master · siongui/pali · GitHub

pali/dictionary.go at master · siongui/pali · GitHub

pali/setting.html at master · siongui/pali · GitHub

[2][GopherJS] Setting Implementation via JSON and Web Storage (localStorage)