Store function as variable in localStorage

Question

I'm trying to store functions in localStorage

class Data extends Component {
    constructor(props);
    var func = {
         f1 : this.f1.bind(this),
         f2 : this.f1.bind(this)
     }
    localStorage.setItem("method",func);

     f1(var id){
      console.log("F1" : id);
     }
     f2(var id){
      console.log("F2" : id);
     }
 }

 class App extends Component{
  constructor(props){
       super(props);
       var m = localStorage.getItem("method");
       m.f1(1);
       m.f2(3);

  }

I get error "m.f1" is not a function. Is it possible to fix that, or is what i'm trying to do impossible ? I want to do it to separate function and component for clarity (to avoid having too long code, and because i use the same function in different components), but it's not necessary

"I'm trying to store functions in localStorage" generally you can't. `localStorage` is for strings and functions are not directly serializable. For example you functions are capturing component instance. — Yury Tarabanko, Mar 11 '19 at 13:06
Also looks like the [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) — Yury Tarabanko, Mar 11 '19 at 13:07
Yury is correct on all points. With regard to this possibly being an [XY problem](https://meta.stackexchange.com/a/66378/140350), what's the actual problem you're trying to solve by doing this? There is almost certainly an easier and more idiomatic solution. — Jordan Running, Mar 11 '19 at 13:08
Do you want to store functions in local storage for fun or there is some real problem that lead you to do so? — Muhammad, Mar 11 '19 at 13:18
If it gives you any idea, you can store a function body with `var a = function(alert(1)){}; localStorage.setItem('key',a.toString());` and then run it using `eval(localStorage.getItem('key'))` — Mohi, Mar 11 '19 at 13:20
typically someone would use an indicator value saved in localStorage that triggers an existing function. localStorage.setItem('runMyfunc', 'true'); — daddygames, Mar 11 '19 at 13:21
Wanted to do it separate function and component for clarity (to avoid having too long code), but it's not necessary — , Mar 11 '19 at 13:22
If those functions belong to an object then you could serialize the object and store it as a string (https://stackoverflow.com/questions/134492/how-to-serialize-an-object-into-a-string) — acarlstein, Mar 11 '19 at 13:30
This is XY problem, as it was mentioned. Data and App belong to the same application, aren't they? How are they related? Consider providing https://stackoverflow.com/help/mcve that shows that. In case App depends on Data instance, it should these functions via DI (passed as props or else) — Estus Flask, Mar 11 '19 at 13:43

score 0 · Answer 1 · answered Mar 11 '19 at 13:40

What you can do is to store the function definition as a string in localStorage and then evaluate it using the eval method but it does not mean that you are storing the actual function, you are just storing a string and later you are running it as JavaScript code using eval.

e.g.

var c = console;

localStorage.setItem("itm", "(function(){ return c})()");

eval(localStorage.getItem("itm")).log("Hello!");

In the above example the c object must be accessible from where you run eval else it will not work because its just a string.

Store function as variable in localStorage

1 Answers1