After a clear, localStorage remembers previous values

Question

So, this is a bit strange. I'm using Backbone and Backbone.localStorage to save remote data to local storage for caching. Pretty standard stuff.

When I run a localStorage.clear() on the entire store, all values are cleared out permanently except for the key that has a string array of values. It gets cleared out on first inspection, but then when storage saves again with Backbone.LocalStorage.sync('create', model); the previous values are back in there.

Of course, if I manually delete the key within Chrome Developer Tools, then it stays gone and isn't repopulated. It's as if the localStorage.clear() call still caches keys with a string array. I've confirmed it is initially cleared out on app start.

I'll post some code and screenshots here on edit, but really it's pretty standard except for the fact those values remain after the key is repopulated. Any ideas here?

EDIT: Lots of fun code to look at:

Collection:

app.DiagnosisCollection = Backbone.Collection.extend({
    model: DiagnosisModel,
    localStorage: new Backbone.LocalStorage('diagnosis'),

    save: function(model) {
        Backbone.LocalStorage.sync('create', model);
    }
});

Model:

app.DiagnosisModel = Backbone.Model.extend({

    urlRoot: app.ApiRoot,
    url: app.DiagnosisApi,

    initialize: function(options) {
        if(!options.query) {
            throw 'query must be passed to diagnosisModel';
        }

        this.local = false;
        this._query = options.query;
    },

    sync: function(method, model, options) {
        var diagnosisKey = localStorage.getItem('diagnosis');
        var index, diagnosisStore;

        if(diagnosisKey) {
            diagnosisKey = diagnosisKey.split(',');
        }

        index = _.indexOf(diagnosisKey, this._query);

        if(index !== -1) {
            diagnosisStore = localStorage.getItem('diagnosis' + '-' + diagnosisKey[index]);
        }

        if(diagnosisStore) {
            this.local = true;
            options.success(JSON.parse(diagnosisStore));
        }
        else {
            this.local = false;
            var fetchUrl = this.urlRoot + this.url + this._query;
            $.getJSON(fetchUrl, function(data, textStatus) {
                if(textStatus !== 'success') {
                    options.error();
                }
                options.success(data);
            });
        }
    }
});

return app.DiagnosisModel;

Controller function that does the work:

        var self = this;

        // Create a new collection if we don't already have one
        // The save function puts it in local storage
        if(!this.diagnosisCollection) {

            this.diagnosisCollection = new DiagnosisCollection();

            this.diagnosisCollection.on('add', function(diagModel) {
                this.save(diagModel);
            });
        }

        var diagModel = new DiagnosisModel({
            query: diagId
        });

        diagModel.fetch({
            success: function() {
                var diagView = new DiagnosisView({
                    model: diagModel
                });

                if(!diagModel.local) {
                    self.diagnosisCollection.add(diagModel);
                }

                self._switchPage(diagView);
            },
            error: function() {
                console.error("Diag Model Fetch Failed");
                Backbone.history.navigate('503', { trigger: true });
            }
        });

By the way, localStorage.clear() call is in app start. It does an API call to see if the version on the server has changed. If the version has changed, then we nuke localStorage.

Answer 1

Instead of localStorage.clear(), use :

localStorage.removeItem('userInfo');

I have faced the same issue in my backbone application and i used this way to clear out the values.

P.s : Yes you need to specify all of your localstorage variables one by one..:(.. But this works well.