CODEWITHSUNDEEP
javascriptlocal-storage
user1942359
user1942359

Reputation: 1639

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));
        }
    }

Upvotes: 148

Views: 194260

Answers (13)

Elanthariyan
Elanthariyan

Reputation: 11

To get all of the "localStorage", copy it and set the localStorage where you want

let localstorage = {...localStorage};
let content = 'localStorage.clear();';
$.each(localstorage, (i, e) => {
    content += `localStorage.setItem('${i}','${e}');`;
})
copy(content);

Upvotes: 1

Dziad Borowy
Dziad Borowy

Reputation: 12579

localStorage is not an array, but an object, so try sth. like this:

for (var a in localStorage) {
   if (!localStorage.hasOwnProperty(a)) continue;
   console.log(a, ' = ', localStorage[a]);
}

Upvotes: 25

Jackson Quintero
Jackson Quintero

Reputation: 188

I hope it helps you, I added a rest parameter, this allows only leaving the properties that are needed

  localStorage.setItem("clear", "values")
  const {clear, ...rest } = localStorage;



  function allStorage(val) {
    const { ...rest } = localStorage;
    return val ? Object.keys(rest) : Object.values(rest);
  }
  console.log(allStorage(false));

Upvotes: 0

Jason
Jason

Reputation: 171

// iterate localStorage
for (let i = 0; i < localStorage.length; i++) {

  // set iteration key name
  const key = localStorage.key(i);

  // use key name to retrieve the corresponding value
  const value = localStorage.getItem(key);

  // console.log the iteration key and value
  console.log('Key: ' + key + ', Value: ' + value);  

}

Upvotes: 14

Obatola Seward-Evans
Obatola Seward-Evans

Reputation: 1

This will return all of the set keys

const getLocalStorageObject = () => {
    storage = {}
    let index = 0

    while (localStorage.key(index) !== null) {
        const key = localStorage.key(index);
        storage[key] = localStorage.getItem(key)
        index += 1
    } 

    return storage;
}

Upvotes: 0

elshnkhll
elshnkhll

Reputation: 2223

You can use for loop with hasOwnProperty to check if object has key.

for (var key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
        console.log(key, ' = ', localStorage[key]);
    }
}

Upvotes: 0

JCrist
JCrist

Reputation: 1

Get an array of localStorage keys this way:

console.log('keys: ', localStorage._keys)

Should probably be obvious from trying out the 'Correct Answer', but if you want to iterate through or search just the key names, localStorage._keys is your simple starting point.

Upvotes: -1

avalanche1
avalanche1

Reputation: 3592

These are all bulky or downright incorrect.

The Correct Answer is:
JSON.parse(JSON.stringify(localStorage))

Upvotes: -2

Grumpy
Grumpy

Reputation: 2243

The easiest way would be to use:

return JSON.stringify(localStorage);

Upvotes: 30

Alexey Prokhorov
Alexey Prokhorov

Reputation: 3921

The easiest way in ES2015+ is:

const items = { ...localStorage };

Upvotes: 195

Igor Yar
Igor Yar

Reputation: 131

for (let [key, value] of Object.entries(localStorage)) {
    console.log(`${key}: ${value}`);
}

Upvotes: 12

David Burson
David Burson

Reputation: 3197

A little more succinct:

function getAllLocalStorage() {
    return Object.keys(localStorage)
        .reduce((obj, k) => {
            return { ...obj, [k]: localStorage.getItem(k)}}, {});
        }

Upvotes: 1

user1693593
user1693593

Reputation:

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;
}

Upvotes: 154

Related Questions