Don't let localStorage/sessionStorage setItem throw errors in Safari Private Browsing Mode

localstorage_safari_private_shim.js

// Safari, in Private Browsing Mode, looks like it supports localStorage but all calls to setItem
// throw QuotaExceededError. We're going to detect this and just silently drop any calls to setItem
// to avoid the entire page breaking, without having to do a check at each usage of Storage.
if (typeof localStorage === 'object') {
    try {
        localStorage.setItem('localStorage', 1);
        localStorage.removeItem('localStorage');
    } catch (e) {
        Storage.prototype._setItem = Storage.prototype.setItem;
        Storage.prototype.setItem = function() {};
        alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.');
    }
}

'use strict';

// implement memory store spec'd to Storage prototype
(function(window) {
  var items = {};

  function MemoryStorage() {}

  MemoryStorage.prototype.getItem = function(key) {
    return items[key];
  };

  MemoryStorage.prototype.setItem = function(key, value) {
    items[key] = value;
  };

  MemoryStorage.prototype.key = function(index) {
    return Object.keys(items)[index];
  };

  MemoryStorage.prototype.get = function() {
    return items;
  };

  Object.defineProperty(MemoryStorage.prototype, "length", {
    get: function length() {
        return Object.keys(items).length;
    }
  });

  window.memoryStorage = new MemoryStorage();
})(window);

// helper function to swap to memory storage

function getStorage(storage) {
  var x = '__storage_test__';
  try {
    storage.setItem(x, x)
    storage.removeItem(x);
    return storage;
  } catch (e) {
    return getStorage.prototype.FALLBACK_STORAGE;
  }
}

getStorage.prototype.FALLBACK_STORAGE = memoryStorage;

var foo = {}; // force fallback
var storage = getStorage(foo);

storage.setItem('foo', 'bar');

console.log(storage.length) // returns 1

@Download (Sorry, just saw this)

I don't think an alert is much better than an error to be honest.

The problem is that the user doesn't get an error (unless they view the console). Most webpages simply silently fail.

Yep, using a wrapper is ideal, however if you have existing code (potentially outside your control) then you can't always modify code to use a wrapper instead of localStorage. If you, on the other hand, had a shim that overwrote Storage.prototype.setItem to work in-memory (so localStorage.setItem would still work), that would be nice.

And you can also replace the standard methods:

  try {
      localStorage.setItem('localStorage', 1);
      localStorage.removeItem('localStorage');
  } catch (e) {
      const memorystorage = new MemoryStorage('localStorage')
      Storage.prototype.setItem = memorystorage.setItem.bind(memorystorage)
      Storage.prototype.getItem = memorystorage.getItem.bind(memorystorage)
      Storage.prototype.removeItem = memorystorage.removeItem.bind(memorystorage)
  }
}