preferences.js/index.html at main · bglendenning/preferences.js · GitHub

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

<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>preferences.js demo</title>

    <link rel="stylesheet" href="stylesheets/style.css"></style>

    <script src="preferences.js"></script>
    <script>
      let preferences;
      const storageKey = "preferences.js demo storageKey";
      const schema = {
        stringPreference: "string",
        numberPreference: "number",
        booleanPreference: "boolean",
        // This will log a schema definition error
        invalidPreferenceType: "invalidPreferenceType",
      };

      // Non-JSON-serializable record found for key
      // Don't create localStorage record
      console.log(
        "Don't create new preferences if non-JSON-serializable record found",
        "for storageKey."
      );
      localStorage.clear();
      console.log("localStorage before:", localStorage.getItem("storageKey"));
      preferences = getOrCreatePreferences({
        storageKey: storageKey,
        schema: schema
      });
      console.log(
        "localStorage after", localStorage.getItem("storageKey"), "\n\n"
      );

      // Non-JSON-serializable record found for storageKey
      // Create localStorage record
      // Note `createOnError`
      console.log(
        "Create new preferences if non-JSON-serializable record found for key"
      );
      localStorage.clear();
      console.log("localStorage before:", localStorage.getItem("storageKey"));
      preferences = getOrCreatePreferences({
        storageKey: storageKey,
        schema: schema,
        createOnError: true,
      });
      preferences.stringPreference = "string preference";
      preferences.numberPreference = 1;
      preferences.booleanPreference = true;
      // This will log a schema definition error
      preferences.nonexistentPreference = "nonexistent preference";
      // This will log a value error
      preferences.stringPreference = 1;
      console.log("stringPreference:", preferences.stringPreference);
      console.log("numberPreference:", preferences.numberPreference);
      console.log("booleanPreference:", preferences.booleanPreference);
      console.log("nonexistentPreference:", preferences.nonexistentPreference);
      console.log(
        "localStorage after", localStorage.getItem("storageKey"), "\n\n"
      );

      // JSON-serializablerecord found for storageKey
      console.log("Get preferences if JSON-serializable record found for key");
      preferences = getOrCreatePreferences({
        storageKey: storageKey,
        schema: schema,
      })
      console.log(preferences.json);
    </script>
  </head>
  <body>
    Open the browser's developer console to review demo logs.
  </body>
</html>