[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

<!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

"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)