convert emoji toolbar to use safe local storage

app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6

@@ -1,3 +1,8 @@
+import KeyValueStore from "discourse/lib/key-value-store";
+
+const keyValueStore = new KeyValueStore("discourse_emojis_");
+const EMOJI_USAGE = "emojiUsage";
+
 // note that these categories are copied from Slack
 // be careful, there are ~20 differences in synonyms, e.g. :boom: vs. :collision:
 // a few Emoji are actually missing from the Slack categories as well (?), and were added
@@ -85,21 +90,17 @@ var initializeUngroupedIcons = function(){
   }
 };
 
-try {
-  if (localStorage && !localStorage.emojiUsage) { localStorage.emojiUsage = "{}"; }
-} catch (e) {
-/* localStorage can be disabled, or cookies disabled, do not crash script here
- * TODO introduce a global wrapper for dealing with local storage
- * */
+if (!keyValueStore.getObject(EMOJI_USAGE)) {
+  keyValueStore.setObject({key: EMOJI_USAGE, value: {}});
 }
 
 var trackEmojiUsage = function(title) {
-  var recent = JSON.parse(localStorage.emojiUsage);
+  var recent = keyValueStore.getObject(EMOJI_USAGE);
 
   if (!recent[title]) { recent[title] = { title: title, usage: 0 }; }
   recent[title]["usage"]++;
 
-  localStorage.emojiUsage = JSON.stringify(recent);
+  keyValueStore.setObject({key: EMOJI_USAGE, value: recent});
 
   // clear the cache
   recentlyUsedIcons = null;
@@ -108,7 +109,7 @@ var trackEmojiUsage = function(title){
 var initializeRecentlyUsedIcons = function(){
   recentlyUsedIcons = [];
 
-  var usage = _.map(JSON.parse(localStorage.emojiUsage));
+  var usage = _.map(keyValueStore.getObject(EMOJI_USAGE));
   usage.sort(function(a,b){
     if(a.usage > b.usage){
       return -1;
@@ -195,8 +196,8 @@ var bindEvents = function(page, offset, options) {
 };
 
 var render = function(page, offset, options) {
-  localStorage.emojiPage = page;
-  localStorage.emojiOffset = offset;
+  keyValueStore.set({key: "emojiPage", value: page});
+  keyValueStore.set({key: "emojiOffset", value: offset});
 
   var toolbarItems = toolbar(page);
   var rows = [], row = [];
@@ -238,8 +239,8 @@ var showSelector = function(options) {
 
   if (Discourse.Mobile.mobileView) PER_ROW = 9;
 
-  var page = parseInt(localStorage.emojiPage) || 0;
-  var offset = parseInt(localStorage.emojiOffset) || 0;
+  var page = keyValueStore.getInt("emojiPage", 0);
+  var offset = keyValueStore.getInt("emojiOffset", 0);
   render(page, offset, options);
 
   $('body, textarea').on('keydown.emoji', function(e){

app/assets/javascripts/discourse/lib/key-value-store.js.es6

@@ -43,6 +43,10 @@ KeyValueStore.prototype = {
     safeLocalStorage[this.context + opts.key] = opts.value;
   },
 
+  setObject(opts) {
+    this.set({ key: opts.key, value: JSON.stringify(opts.value) });
+  },
+
   get(key) {
     if (!safeLocalStorage) { return null; }
     return safeLocalStorage[this.context + key];