Lists and localStorage

2015-02-26 1 min read

    I recently discovered the localStorage functionality in HTML5 and used it on a quick internal tool at TripleLift. One hiccup I ran into was that while it provides the ability to set and get key/value pairs it stores everything as a string so I needed to write a few utility methods to get it to work with lists. They’re pretty straightforward but hopefully they inspire someone to improve on them.

    // Also let caller specify max size of list
    function addItem(k, v, limit) {
      var a = getItems(k);
      a.push(v);
      if (!isNaN(limit)) {
        while (a.length > limit) {
          a.shift();
        }
      }
      localStorage.setItem(k, JSON.stringify(a));
    }
    
    function getItems(k) {
      var a = null;
      try {
        a = JSON.parse(localStorage.getItem(k));
      } catch(e) {}
      if (a && Array.isArray(a)) {
        return a;
      }
      return [];
    }
    
    // Tests/Examples
    localStorage.setItem('test_list', null);
    
    addItem('test_list', {"name": "Dan"});
    addItem('test_list', {"food": "pizza"});
    addItem('test_list', {"beer": "Newcastle"});
    
    var l = getItems('test_list');
    
    console.log('Lengths match: ' + (l.length === 3));
    console.log('Value 0 matches: ' + (l[0].name === 'Dan'));
    console.log('Value 1 matches: ' + (l[1].food === 'pizza'));
    console.log('Value 2 matches: ' + (l[2].beer === 'Newcastle'));
    
    addItem('test_list', {"size": 2}, 2);
    
    l = getItems('test_list');
    
    console.log('List limit works: ' + (l.length === 2));
    console.log('Value 0 matches: ' + (l[0].beer === 'Newcastle'));
    console.log('Value 1 matches: ' + (l[1].size === 2));