2

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

 2 years ago
source link: http://siongui.github.io/2017/01/16/javascript-implement-setting-via-json-and-localStorage/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

January 16, 2017

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:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK