How to save functions in localStorage API HTML5

Question

I am trying to save an array in localStorage but it contains functions (called promise) in an object of the array, but the problem appears when I convert array to string using JSON.stringify, apparently all functions are removed and when I parse string to JSON Object it comes without methods.

/* Example code */

var storage = {
 getListUsers: function(){
  return {
   name: 'name',
   age: 'age'
  }
 },
 active: true,
 data: []
}

var convert = JSON.stringify(storage);
localStorage.setItem('data', convert);

Best regards.

Use the optional second argument to `JSON.stringify`, the `replacer` function - and the optional second argument to `JSON.parse`, the `reviver` function - though it's going to be a bit of a challenge — Jaromanda X, Aug 11 '17 at 03:45
*"it contains functions (called promise)"* - Are you talking about promises that are in your `storage.data` array? (I.e., promises not actually shown in the question?) — nnnnnn, Aug 11 '17 at 03:54
I would separate logic from data and not store functions in local storage. Makes it difficult to upgrade the version of your code down the road for starters when you have chunks of code scattered in people's browsers. Why not add the function (via extend or some other method) after the object has been rehydrated from localStorage? — flyer, Aug 11 '17 at 03:56
If, as nnnnnn pointed out, some of the data is a Promise, then, a) a Promise isn't a function, and b) the fix is possibly knowing how to deal with asynchronous code - saving a "Promise" is never going to work, because you can't save a working Promise as a string — Jaromanda X, Aug 11 '17 at 04:32

score 2 · Accepted Answer · answered Aug 11 '17 at 07:48

Few observations :

Functions don't exist in JSON. Look into the official document json.org.
A value can be a string in double quotes, or a number, or true or false or null, or an object or an array but not a method.
Why method inside an JSON Object ? Methods is basically used to manipulate the data. You can work with data outside of the JSON object as well.

You can use JSON.stringify replacer function to convert the function into string while converting to JSON string.

DEMO

var storage = {
 getListUsers: function() {
  return {
   name: 'name',
   age: 'age'
  }
 },
 active: true,
 data: []
}

var json = JSON.stringify(storage, function(key, value) {
  if (typeof value === 'function') {
    return value.toString();
  } else {
    return value;
  }
});

console.log(json);

To convert it again to function use JSON.parse then use eval something like that var storage = JSON.parse(storage); storage.getListUsers = eval("(" + storage.getListUsers + ")"); — Mohammad Fared, Aug 23 '20 at 07:53

score 0 · Answer 2 · answered Aug 11 '17 at 03:50

You can set the JavaScript which should be set at localStorage as .textContent of a <script> element, get the .textContent of the element to set at localStorage. You can then set the same text at a different <script> element or convert the text to a data URI which can be posted to other browsing contexts or a server.

<script id="storage">
/* Example code */

var storage = {
  getListUsers: function() {
    return {
      name: 'name',
      age: 'age'
    }
  },
  active: true,
  data: []
}
</script>
<script>
var convert = document.getElementById("storage");

localStorage.setItem("data", convert.textContent);

console.log(localStorage.getItem("data"));    
</script>

How to save functions in localStorage API HTML5

2 Answers2