export Data in localStorage for later re-import

Question

I want to export a few items from my localStorage to save it externally but in a format so that I can import it again later.

My attempt was to write executable code that can be pasted later in a textarea. Then the value of that textare will simply be eval()ed.

Problem: The data stored in localStorage were stored as

var data = [];
data.push('sampledata');
data.push({sample: 'object'});
localStorage.setItem('varname',data);

So it contains various chars I don't like, like ', " etc

My (not working) solution so far was:

var container = $('#localDataContainer');
container.append('localStorage.setItem("cockpitLastVisited","' + localStorage.getItem("cockpitLastVisited") + '");<br/>');
container.append('localStorage.setItem("cockpit_services","' + localStorage.getItem("cockpit_services") + '");<br/>');
container.append('localStorage.setItem("cockpit_users","' + localStorage.getItem("cockpit_users") + '");');

If my attempt seems to be OK, what is the best way to create code that can then be executed the way it is?

Vadose

just in case someone needs a chrome extension solution: try StorageAce – Paderewski

Answer 1

You can encode Objects into Strings using JSON.stringify (object to String) and decode Strings into Objects using JSON.parse (String to Object).

Write to localStorage

localStorage.setItem("varname",JSON.stringify(originalVarname));

Read from localStorage

var originalVarname= JSON.parse(localStorage.getItem("varname"));

Dormeuse

Answer 2

Here's how to import/export your entire localStorage

Export

copy(JSON.stringify(localStorage));

This will copy your localStorage to your clipboard. (You need two JSON.stringify()'s to get the quotes escaped.)

Import

var data = JSON.parse(/*paste stringified JSON from clipboard*/);
Object.keys(data).forEach(function (k) {
  localStorage.setItem(k, JSON.stringify(data[k]));
});

Charcuterie

For importing we need two JSON.parse() as well – Sherleysherline

Hm, shouldn't that be: localStorage.setItem(k, JSON.stringify(data[k])) so that the data goes back into local storage as strings? – Amarillo

@Amarillo Using JSON.stringly can cause trouble by adding unwanted quotes. – Carrew

Answer 3

Just an improved version of Jeremy. To simplify the process

copy('var data = '+JSON.stringify(localStorage)+';Object.keys(data).forEach(function (k){localStorage.setItem(k, data[k]);});');

Run this in console where you need to export, it copies localstorage content along with code to clipboard and just paste it in the console where you want to import.

Tropho

Answer 4

Export

copy(JSON.stringify(JSON.stringify(localStorage)));

Import

var data = JSON.parse(/*previously copied stringified JSON from clipboard*/);
Object.keys(data).forEach(function (k) {
  localStorage.setItem(k, data[k]);
});

Lease

I needed to stringify twice as above. One time stringification did not work for me. – Logorrhea

Answer 5

Just a modernized version of @iceLord answer.

Just run this in the console, it will put the code to restore the localStorage back into your clipboard.

copy(`Object.entries(${JSON.stringify(localStorage)})
.forEach(([k,v])=>localStorage.setItem(k,v))`)

Bookmarklet version

javascript:prompt(`localStorage from ${location.host}${new Date().toLocaleString()}`, `/* localStorage from ${location.host}${new Date().toLocaleString()}*/Object.entries(  ${JSON.stringify(localStorage)}).forEach(([k,v])=>localStorage.setItem(k,v))`)

Kermis

Answer 6

This would return you an object with all the items in the local Storage

   copy(JSON.stringify(localStorage)); // one

To Upload back to the browser -

var data = {//object that we got from one}
Object.keys(data).forEach(function (k) {
      localStorage.setItem(k, JSON.stringify(data[k]));
    });

Just an update, all the credit goes to Jeremy

Uncover