How to store a javascript function in JSON

I have a JS object I would like to save in Local Storage for future use, and I cannot parse it to a string.

Code:

JSON.stringify({
    a: 5,
    b: function (param) {
        return param;
    }
})

Result:

"{"a":5}"

How do I save it for future use, if not with JSON?

(And creating my own Lexer-Parser to interupt string function I dont think is an option)

Answers:

Answer

Usually a question like this indicates an X/Y problem: You need to do X, you think Y will help you do that, so you try to do Y, can't, and ask how to do Y. It would frequently be more useful to ask how to do X instead.

But answering the question asked: You could use replacer and reviver functions to convert the function to a string (during stringify) and back into a function (during parse) to store a string version of the function, but there are all sorts of issues with doing that, not least that the scope in which the function is defined may well matter to the function. (It doesn't matter to the function you've shown in the question, but I assume that's not really representative.) And converting a string from local storage into code you may run means that you are trusting that the local storage content hasn't been corrupted in a malicious way. Granted it's not likely unless the page is already vulnerable to XSS attacks, but it's an issue to keep in mind.

Here's an example, but I don't recommend it unless other options have been exhausted, not least because it uses eval, which (like its close cousin new Function)) can be a vector for malicious code:

// The object
var obj = {
    a: 5,
    b: function (param) {
        return param;
    }
};

// Convert to JSON using a replacer function to output
// the string version of a function with /Function(
// in front and )/ at the end.
var json = JSON.stringify(obj, function(key, value) {
  if (typeof value === "function") {
    return "/Function(" + value.toString() + ")/";
  }
  return value;
});

// Convert to an object using a reviver function that
// recognizes the /Function(...)/ value and converts it
// into a function via -shudder- `eval`.
var obj2 = JSON.parse(json, function(key, value) {
  if (typeof value === "string" &&
      value.startsWith("/Function(") &&
      value.endsWith(")/")) {
    value = value.substring(10, value.length - 2);
    return eval("(" + value + ")");
  }
  return value;
});
document.body.innerHTML = obj2.b(42);

Answer

You can't store functions in JSON.

The value in JSON may contain only string, number, object, array, true, false or null:

enter image description here

Check out it on JSON site.

Answer

One simple way of doing this is

var dstr = JSON.stringify({
                           a: 5,
                           b: param => param
                          }, (k,v) => typeof v === "function" ? "" + v : v);
Answer

I've taken to storing the function name, along with the parameter values, in an array, with the first item in the array being the function name prepended with a $, to separate them from normal arrays.

{
    "object": {
        "your-function": ["$functionName", "param-1", "param-2"],
        "color": ["$getColor", "brand", "brand-2"],
        "normal-array": ["normal", "array"]
        ...
    }
}

In the above example I have Sass and JS functions to retrieve color values from a global map/object. Parsing the function in this manner naturally requires custom code, but in terms of "storing" functions in JSON, I like this way of doing it.

Answer

I'd recommend this approach:

Store arguments and the body in your json:

{"function":{"arguments":"a,b,c","body":"return a*b+c;"}}

Now parse json and instantiate the function:

var f = new Function(function.arguments, function.body);

I think it's save

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.