Javascript:在localstorage中存储函数

Question

是否可以插入localstorage或是否有其他方式来存储它？

$('#pass_to_score').on('click',function(){

var compressed = function(){
    $('.whole_wrap_of_editcriteria').css('display','none');
    $('#wrappler').css('display','block');
    $('#li_addcriteria').css('display','none');
    $('#li_menu1').addClass('active');
    $('#home').removeClass('active');
    $('#menu1').addClass('active');
    $('#title_panel').html('Edit criteria scoring');
}
compressed();
localStorage.setItem('compressed', compressed());
//i also try set as JSON.stringify but its undefined

});

Answer 1

我不知道为什么你会这样,我不推荐它,但你可以使用它toString.

存储它:

var myFunc = function (){
  alert('Hello world!');
};

// Store it as a String
localStorage.setItem('compressedFunc', myFunc.toString());

稍后,检索它:

var compressedFunc = localStorage.getItem('compressedFunc');

// Convert the String back to a function
var myFunc = eval('(' + compressedFunc + ')');

// Use it
myFunc();

Answer 2

如果您有用 JavaScript 编码的函数，则无需从 恢复它localStorage，因为您已经拥有了它。

您无法对函数进行 JSON 编码。您可以保存该函数的源代码，并在检索时应用eval它。但众所周知，这具有一定的风险，正如“eval邪恶”一词所概括的那样。

如果您发明一个紧密描述函数应该做什么的对象结构，您就可以稍微限制这种风险。在您的例子中，函数中的每个语句都是应用于 jQuery 选择器的方法。您可以用以下对象来表示：

var compressed = [
    { selector: '.whole_wrap_of_editcriteria', method: 'css',         args: ['display', 'none'] },
    { selector: '#wrappler',                   method: 'css',         args: ['display', 'none'] },
    { selector: '#li_addcriteria',             method: 'css',         args: ['display','none'] },
    { selector: '#li_menu1',                   method: 'addClass',    args: ['active'] },
    { selector: '#home',                       method: 'removeClass', args: ['active'] },
    { selector: '#menu1',                      method: 'addClass',    args: ['active'] },
    { selector: '#title_panel',                method: 'html',        args: ['Edit criteria scoring'] }
];

然后您的实际函数可以将该对象作为其输入并对其进行处理，从而产生相同的效果：

var applyInstructions = function(instructions) {
    instructions.forEach( cmd => $(cmd.selector)[cmd.method](...cmd.args) );
}

现在，当你想将这些知识保存到 时localStorage，你只需要存储上面构造的对象，如下所示：

// save to localStorage:
localStorage.setItem('compressed', JSON.stringify(compressed));

检索它后，您将对其执行通用函数：

// get from localStorage:
applyInstructions(JSON.parse(localStorage.getItem('compressed')));

这与 using 类似eval，但它的优点是您可以限制可以执行的内容（在 中applyInstructions）。例如，您可以检查该method属性是否只能是值css、addClass、removeClass和 之一html，尽管保留最后一个值可能很危险。text如果可能的话，将是一个更好的选择。

更安全的方式如下applyInstructions：

var applyInstructions = function(instructions) {
    if (instructions.some( 
            cmd => ['css','addClass','removeClass','textContent'].indexOf(cmd.method)==-1)) {
        throw "Invalid instructions object";
    }
    instructions.forEach( cmd => $(cmd.selector)[cmd.method](...cmd.args) );
}