javascriptlocal-storage

How to retrieve all localStorage items without knowing the keys in advance?


I want to show all of the keys and storage written before. My code is below. I created a function (allStorage) but it doesn't work. How can I do this?

    function storeUserScribble(id) {
        var scribble = document.getElementById('scribble').innerHTML;
        localStorage.setItem('userScribble',scribble);
    }

    function getUserScribble() {
        if ( localStorage.getItem('userScribble')) {
            var scribble = localStorage.getItem('userScribble');
        }
        else {
            var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
        }
        document.getElementById('scribble').innerHTML = scribble;
    }

    function clearLocal() {
        localStorage.clear();
        return false;
    }

    function allStorage() {
        var archive = [];
        for (var i = 0; i<localStorage.length; i++) {
            archive[i] = localStorage.getItem(localStorage.key(i));
        }
    }

Solution

  • If you modify your function to this you can list all items based on key (will list the items only):

    function allStorage() {
    
        var values = [],
            keys = Object.keys(localStorage),
            i = keys.length;
    
        while ( i-- ) {
            values.push( localStorage.getItem(keys[i]) );
        }
    
        return values;
    }
    

    Object.keys is a new addition to JavaScript (ECMAScript 5). It lists all own keys on an object which is faster than using a for-in loop which is the option to this.

    However, this will not show the keys. For that you need to return an object instead of an array (which is rather point-less IMO as this will bring you just as far as you were before with localStorage just with a different object - but for example's sake):

    function allStorage() {
    
        var archive = {}, // Notice change here
            keys = Object.keys(localStorage),
            i = keys.length;
    
        while ( i-- ) {
            archive[ keys[i] ] = localStorage.getItem( keys[i] );
        }
    
        return archive;
    }
    

    If you want a compact format listing then do this instead - here each item in the array will have key=item which you later can split into pairs and so forth:

    function allStorage() {
    
        var archive = [],
            keys = Object.keys(localStorage),
            i = 0, key;
    
        for (; key = keys[i]; i++) {
            archive.push( key + '=' + localStorage.getItem(key));
        }
    
        return archive;
    }